Hi
Anyone care to share a custom css code to remove the white gap btwn the breadcrumb section & Bonna banner (shown by the red box) ?
I have adjusted the margin under the elementor section but it’s not reflecting on the front end.
Thanks in Advance.
Hi
Anyone care to share a custom css code to remove the white gap btwn the breadcrumb section & Bonna banner (shown by the red box) ?
I have adjusted the margin under the elementor section but it’s not reflecting on the front end.
Thanks in Advance.
It looks like its the padding that needs removing.
.nasa-cat-header .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
padding:0;
}
Thanks for sharing the solution. This is a good reminder that when an Elementor spacing adjustment doesn’t appear on the front end, it’s worth checking the generated CSS and the actual padding on the populated column rather than only changing the section margin. I’ve run into similar issues where the visual gap was coming from an inner element rather than the section itself.
Hi Paul
Can you pls review the code ?
The code has removed the white gap btwn the Bonna banner & slider.
I want to remove the white gap btwn the Breadcrumb section & the bonna banner.
I can’t check as I’m away until next Friday without my laptop.
However I’m pretty sure the code I gave removed all the padding around that black bar. If you just want the top padding removed then use padding-top instead but as in other threads you may need to add !important.
Maybe someone else can take a look while I’m away. ![]()
Hi Paul
Apologies for interrupting your break.
Unfortunately, neither of the codes below are working. ![]()
.nasa-cat-header .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
padding-top:0;
}
.nasa-cat-header .elementor-column-gap-default>.elementor-column>.elementor-element-populated {
padding-top:0 !important;
}
Front end screenshot
I’m happy to wait until next week, unless someone else wants to have a go at it.
What browser are you using, because I’m not seeing it.
It could be a cache issue with your machine. Doing a hard refresh (Ctrl-F5) might resolve it for you.
Hi Dave
Which browser did you test the page ?
Chrome on Windows
The white gap is visible when the page is opened with the sequence of steps below:
The white gap is visible btwn the breadcrumb section & bonna banner
Perhaps, this might help to review the code ?! ![]()
The .nasa_shop_description has a .padding-top-20 class added to it.

My first thought is there must be a way of tweaking the theme settings in Elementor without going the custom CSS route? A UI element in the control panel perhaps, where you can set these things.
That said regarding the custom CSS route, I did try setting padding-block-start in dev-tools inspector and it does appear to over-rule the padding-top class e.g.
.nasa_shop_description {
padding-block-start: 0px !important;
}
If you only want to target this element on a specific page you would obviously need to be a bit more specific
e.g. body.term-plates-platters .nasa_shop_description { ...