[Resolved] Padding Left/Right Non Mobile

[Sean]

I know this is probably a strange one. So I’m looking to add padding on the left and right side of the website. Padding that would be transparent, and expose the background image that I have selected picked for Body. I thought it would be an option in Element Spacing, no luck. But I want like 20px padding on both sides while viewing the website in desktop view. While in mobile/tablet view however, the website will not have padding.

[Tom]

You could try something like this:

@media (min-width: 769px) {
    body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

[Sean]

Works Flawlessly, thank you.

[Tom]

You’re welcome 🙂

[inma_b_p]

Hello

I have a very similar problem.
I want to have a padding-left of 100px in the desktop version and only 20px in the mobile version.

I can not fit it with the element spacing neithe with the CSS.
May I have to deactivate the element spacing in order to get this code will work?

@media (max-width 768px) {
.one-container .site-content {
padding-left: 10px;
padding-right: 10px;
}
}

@media (min-width: 769px) {
.one-container .site-content {
padding-left: 100px;
padding-right: 100px;
}
}

My website is: elcucharonverde.com

Thanks in advance.

Lada

[Tom]

Hi there,

I think we need a Mobile Spacing section with the spacing add-on.

Make your CSS a little more specific:

@media (max-width 768px) {
    body.one-container .site-content {
        padding-left: 10px;
        padding-right: 10px;
    }
}

[inma_b_p]

Thanks

I’m going to test it

[Tom]

No problem 🙂

[inma_b_p]

Thank you so much Tom

It works perfectly

Lada

[Tom]

You’re welcome 🙂

[Author]

Posts