[Resolved] Padding left and right of Container in mobile view

[trung]

Hi GeneratePress,

In Customize, I set Layout Container as:
– Container width: 1100
– Seperating space: 30
– Content layout: Seperate containers
– Content padding: 50 – 30 – 40 -30
– Mobile content padding: 50 – 40 – 40 – 40

In mobile view, I can see the seperating space between Container and the top (header) + the bottom (footer), but I can not see the seperating space between Container and the left + the right.

How can I do to make it?

Thank you.

[David]

Hi there,

is it the front page and the WP Show Post List? If so then you need to add some padding to the Elementor Section you have added them to. Let me know.

[trung]

No, it isn’t.

It happens on Blog category page and other pages. Is it the default setting of GP theme?

Here images of my case:

Image of Login page

Image of Blog page (theme setting, not use Elementor and WPSP)

Image of Blog page (in PC view)

[David]

So when you use the Separate Container layout the padding is moved to inside the separate containers ( articles etc ). If you want you can add some left and right margin on the smaller screens like so:

@media (max-width: 768px) {
    #main {
        margin-left: 10px;
        margin-right: 10px;
    }
}

[trung]

Your code does not really work in my website. So I change a little of your code (replace ID #main with class .container) and it worked well.

@media (max-width: 768px) {
    .container {
        margin-left: 10px;
        margin-right: 10px;
    }
}

Is it all right about coding?

[David]

Awesome – and yes the code looks good 🙂

[trung]

Thank you, David.

[David]

You’re welcome

[Author]

Posts