Custom css code to remove white gap from wordpress page

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.

Page link

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. :slight_smile:

Hi Paul

Apologies for interrupting your break.

Unfortunately, neither of the codes below are working. :face_with_diagonal_mouth:

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

  1. Vertical Menu > Tableware > Plates & Platters

  1. Click on Bonna Porcelain

The white gap is visible btwn the breadcrumb section & bonna banner

Perhaps, this might help to review the code ?! :thinking:

The .nasa_shop_description has a .padding-top-20 class added to it.

image

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