Docs

[jtbtu]

I have a page with a “blank – no container” layout because some sections need full-width background images. Some sections have margins of 10-15%, some sections have none, but the rows have padding of 10-15%. This looks great on desktop, but it’s too much on mobile. I actually need to increase the padding for some sections on desktop still, but I need to be able to adjust mobile first.

There are around 50 sections on this particular page, so it’s not really ideal to recreate each section for mobile and hide on other devices.

How can I reduce the margins/padding for all sections/rows JUST for MOBILE?

[jtbtu]

This reply has been marked as private.

[Rupok]

Hi there,

You can reset the section padding for mobile with media query.
You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 767px) {
.x-section {
  padding: 45px 0!important;
}
}

If you need to control them individually then add a custom class for them and add the CSS within media query for the classes.

Hope this makes sense.

[jtbtu]

So what about rows? Just use custom class? Can I add more than one class to the media query?

[Joao]

Hi There,

Yes you can, you just need to add a , between the classes.

Hope it helps

Joao

[Author]

Posts