Complete theme – how to center align Featured Boxes

[Pui Ching]

URL is http://lowenpianohouse.com/wp/v4

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Customize>>Basic>>Custom CSS Box

Add this code there:

.site_boxed .fblock4 { width:22.70%}
.site_boxed .featured_area .sectionrow { margin:0;}

Regards,
Dave

[Pui Ching]

Thanks for the prompt response.

Unfortunately the provided solution only works for Desktop layout; the 4 boxes would be squished together when viewing on a small screen such as mobile phone. Is there another cure?

[Sonl Sinha]

Kindly add this code in custom css box:

@media screen and (max-width:767px) {
.site_boxed .fblock4, .boxpattern-2 { width:100%;}
.servicerow { margin:0;}
}

Regards,
Dave

[Pui Ching]

Thanks but they become left aligned again when viewing in desktop mode?

[Sonl Sinha]

Did you added both code?

.site_boxed .fblock4 { width:22.70%}
.site_boxed .featured_area .sectionrow { margin:0;}
@media screen and (max-width:767px) {
.site_boxed .fblock4, .boxpattern-2 { width:100%;}
.servicerow { margin:0;}
}

Regards,
Dave

[Pui Ching]

Yes both code added and the boxes still aligned to the left in desktop view

[Sonl Sinha]

Hi Pui,

Add this code in custom css box:

.fblock4 { width:22.70%}
.site_boxed .featured_area .sectionrow { margin:0;}
@media screen and (max-width:767px) {
.fblock4, .boxpattern-2 { width:100%;}
.servicerow { margin:0;}
}

Regards,
Dave

[Pui Ching]

Thank you Dave it finally worked.

I also noticed that the Flipboxes are aligned a little off center to the right. Is there a way to make them perfectly centered?

[Sonl Sinha]

Kindly go to Appearance>>Customize>>Scroll down to left bottom to find Custom CSS and paste there:

Add this code there:

.flipcard.h:nth-child(2) {margin-left:-10px !important;}

@media screen and (max-width:1169px) {
.flipcard.h:nth-child(2) {margin-left:0 !important;}
}

Regards,
Shri

[Pui Ching]

It worked. Thank you Shri!

[Sonl Sinha]

🙂

[Author]

Posts