[Resolved] Section padding vs custom css

[Paul]

All sections by default have top and bottom padding of 40px. If I change that to 20 or 30 within section settings, the padding number will be reduced by 20 or 10. If I give that section it’s own css class and change the padding to 20 or 30, the padding number will increase by 20 or 10. Why is the behaviour opposite?

Thanks,
Paul.

[Leo]

Hi Paul,

Just tested and not seeing the opposite behaviour you are talking about.
The padding changes according to what I have in CSS:

#generate-section-1 .generate-sections-inside-container {
    padding-top: 100px;
    padding-bottom: 100px;
}

Just out of curiosity, why use CSS when you can just use the settings?

[Paul]

Hi Leo,

Please see this image for the problem – Section Padding

I would prefer to use css if I’m using the same classes across the site rather than apply the same settings repeatedly. I also think it’s more user friendly for a client if they don’t have to worry about those settings (if WP is really user friendly at all for non-technical people).

Thanks,
Paul.

[Leo]

What element are you targeting to change all of them? Is your site live so we can take a look?

[Paul]

The same behaviour is repeated with any section you create. I’ve just used a page title above to demonstrate.

The site is live on the subdomain above. I’d share login details but I don’t know how that can be done securely on this forum.

[Leo]

What CSS are you adding to change the padding for all the sections at once and how are you adding it?

I tested the CSS below and was able to change all of them without problem. Give it a shot?

.generate-sections-inside-container {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

Let me know.

[Tom]

Make sure you’re targeting the correct element.

If I give my section a class of: my-section-class

I would do this:

.my-section-class .generate-sections-inside-container {
    padding-top: 100px;
    padding-bottom: 100px;
}

[Paul]

I didn’t include ‘.generate-sections-inside-container’ in my css. If I include that and !important after the padding value it works.

Thanks.

[Leo]

You’re welcome!

[Author]

Posts