[Resolved] Section padding vs custom css

Home Forums Support Section padding vs custom css

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #267473
    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.

    #267527
    Leo
    Staff
    Customer Support

    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?

    #267586
    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.

    #267592
    Leo
    Staff
    Customer Support

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

    #267594
    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.

    #267596
    Leo
    Staff
    Customer Support

    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.

    #267597
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #267627
    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.

    #267634
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.