[Resolved] padding problems

[Tom]

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

[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.

[Tom]

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! 🙂

[Dave Foy]

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

[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.

[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.

[Tom]

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 🙂

[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.

[Tom]

Hmm, what if we try this:

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

[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! 😀

[Tom]

Your site looks awesome 🙂

[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.

[Tom]

Great to hear, thank you! 🙂

[Author]

Posts