[Resolved] Margins on tablet and mobile

[Mireia]

Hi there,

We are working with GP and GBlocks and the website looks great on desktop, but it has no margins on mobile or tablet. We would like to add a small left&right margin so that elements are separated from the edge of the screen.

We have already tried in various ways (Customizer, etc). Can you help us?

Thank you very much in advance!

[David]

Hi there,

you can adjust the padding for the theme Container in Customizer > Layout > Container. If you switch to mobile view then you can adjust it specifically for mobile

[Mireia]

Thanks David!

We had tried before and it is not working (I send image of a new attempt). Do you know why it can be? It may be related to the fact that the pages are full width to have a background image from end to end?

[David]

Aah ok – you have your content container set to Full Width. Which removes the Theme padding.
It relies on you adding the padding on the Container Blocks in the editor…. which does mean editing each container block on each page….

If you want you can add this CSS to give parent level Container blocks some padding on small devices:

@media(max-width: 768px) {
    .entry-content > .gb-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

[Mireia]

Worked great! Thank you very much 🙂

[David]

Glad to hear that!

[Author]

Posts