[Resolved] padding problems

Home Forums Support padding problems

Viewing 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #213882
    Tom
    Lead Developer
    Lead Developer

    Glad I could help – if they have any suggestions for how I can handle this better in the theme I’m all ears πŸ™‚

    #281373
    Dave Foy

    This is an old thread, but this is an issue that I’ve had too. It’s driven me crazy!

    Yes, you can add manual padding to each and every ‘section’ in Elementor, but that’s neither fun nor scalable.

    Here’s what I have now in my custom CSS. It works an absolute treat. No need to add any left or right padding manually to anywhere in Elementor.

    The CSS also detects situations where adding the padding isn’t desirable.

    /* Set some default left and right padding on mobile - same as I have in GeneratePress's layout and header settings */
    .elementor-top-section.elementor-section-boxed > .elementor-container {
    	padding: 0 20px;
    }
    
    /* 1. Don't set padding if an Elementor library item is embdedded within another section, via shortcode */
    /* 2. Also don't set padding if an Elementor library item is embdedded within a standard non-full width page */
    .elementor-top-section .elementor-top-section.elementor-section-boxed > .elementor-container,
    .inside-article .elementor-top-section.elementor-section-boxed > .elementor-container {
    	padding: 0;
    }

    Incidentally Tom – I notice in OceanWP, the developer has some code in his theme CSS to ensure that Elementor sections are given the same consistent spacing on mobile as his own theme elements (e.g. header):

    @media only screen and (max-width: 959px) {
    .container, body.content-full-screen .elementor-section.elementor-section-boxed>.elementor-container {
        max-width: 90%;
    }
    }

    As you can see, he uses max-width to control the mobile ‘padding’, whereas you use actual padding.

    I only mention it because I noticed it as a possible solution. Do I like it? Hmm… I’m not sure. As you’ll see from my code, there are some situations with Elementor where a catch-all style rule like this doesn’t work and has to be overriden anyway. It’s tricky!

    Personally, I think you’re best off not bothering in GP. It’d likely cause more issues than solve them. πŸ™‚

    Anyway, hopes this maybe helps someone.

    #281450
    Tom
    Lead Developer
    Lead Developer

    Thanks for the suggestions, Dave!

    I’ve learned that adding CSS to work with other plugins can lead to issues further down the road that are very hard to reverse. Best to keep it simple I think! πŸ™‚

    #281461
    Dave Foy

    I’d 100% agree. One of the many reasons I love GeneratePress – sensible design and code decisions.

    #281530
    Dave Foy

    Sorry to bother you again Tom… Just spotted one thing that I need to fix. Hope you can help!

    With the below code, I’m setting the 20px left and right padding on Elementor elements, to give nice spacing on mobile:

    .elementor-top-section.elementor-section-boxed > .elementor-container {
    	padding: 0 20px;
    }

    This CSS used to be more specific to .full-width-content, because it should only affect Elementor sections that spread to the full width of the page. I don’t want it to be applied if we’re on a non-full-width page.

    However… what I found was that sometimes I have full-width Elementor elements that are not on .full-width-content pages. For example: if I create a custom ‘top bar’ or footer in Elementor, and place the shortcode for them in GP Hooks. These elements are still full width, and therefore still need the padding applied… but my CSS specific to .full-width-content wouldn’t take effect.

    So I removed the more specific selector, to the current CSS you see above. Problem now is, if I invoke Elementor on a standard GP theme template page (i.e. not a full width template), then I also get the 20px left and right padding, which I don’t want.

    Example: https://www.designbuildweb.co/standard-page/

    Notice the content (“Here’s the page title”). It’s incorrectly padded in 20px. It should be zero.

    Notice the footer. This is an Elementor library item, added with a shortcode. It does have 20px padding applied, which is correct. If I made my CSS specific to full-width templates only, it would now be zero on this page.

    Can you suggest a way for me to make the above CSS more specific, so I can override it with zero padding, if the Elementor element is placed on a standard page? Is there an element/selector that will be present on standard page non-full-width templates that won’t be present on full width page templates?

    I’ve wracked my brains and can’t see any.

    The only other option will be to wrap the shortcode in a div (with a class of ‘full-width’ or similar). Then I’d change my CSS to be for full width pages, but also for .elementor-container elements within the ‘full-width div. It’s not ideal – I’d rather just be able to place the shortcode in hooks.

    Thanks so much for your help.

    #281531
    Dave Foy

    PS: I could also apply a class to these embedded full width Elementor sections within the section’s settings itself. Not a massive deal.

    #281623
    Tom
    Lead Developer
    Lead Developer

    You could add this:

    .entry-content .elementor-top-section.elementor-section-boxed > .elementor-container {
        padding: 0;
    }

    So it won’t apply to elements inside the content area.

    Let me know if that works or not πŸ™‚

    #281701
    Dave Foy

    Unfortunately that doesn’t work. There’s still an .entry-content div on .full-width-content pages. It wraps the content area. So the zero padding applies there too.

    #281895
    Tom
    Lead Developer
    Lead Developer

    Hmm, what if we try this:

    body:not(.full-width-content) .entry-content .elementor-top-section.elementor-section-boxed > .elementor-container {
        padding: 0;
    }
    #281905
    Dave Foy

    That’s the one!

    **GENIUS**

    Thanks so much Tom. I really appreciate this. Got my perfect set-up now. I’m ready to start teaching! πŸ˜€

    #281906
    Tom
    Lead Developer
    Lead Developer

    Your site looks awesome πŸ™‚

    #281913
    Dave Foy

    Thanks Tom. Kind of you to say. I’m not a designer, but GP makes it so easy. πŸ™‚

    The feedback I’ve had so far has bowled me over actually. Seems there’s lots of folks looking for what I’m promising to teach. I’m so pleased I discovered GeneratePress. It’s absolutely perfect for what I have in mind.

    Thanks again for everything.

    #282026
    Tom
    Lead Developer
    Lead Developer

    Great to hear, thank you! πŸ™‚

Viewing 13 posts - 16 through 28 (of 28 total)
  • You must be logged in to reply to this topic.