[Resolved] Reduce space between header and content

[Adrian]

1. I can’t figure how to reduce further the space between the header and the content, including for mobile.

I’ve already set the container top padding to 0 – screenshot https://gyazo.com/66d48b69436333ed4a18aeec2c49e1bb

2. There is empty space after the search bar on desktop which doesn’t look good. How can I have the search icon to be aligned to the right?

I didn’t see where to remove padding or margin for the primary menu or the header.

Thanks.

[Leo]

Hi there,

I’m seeing a stylesheet from Kadence theme loading in the page you’ve linked:
https://www.screencast.com/t/tPjw11s27vT

I believe that’s causing the issue.

Any idea where that’s coming from?

If not then please disable all plugins except GP Premium and GenerateBlocks.

[Adrian]

This is 100% GeneratePress as I just set it up.

https://gyazo.com/4e4a74b5fabaec1aa680ec7d9388ae39

I got the header and content to be as close as they are now by reducing the container top padding from 25 to 0 but I’d like to reduce it a bit more if possible.

Also that icon has padding or margin to the right. The margin wasn’t there before I enabled search in primary menu in GP Customizer.

Thanks.

[Leo]

This is 100% GeneratePress as I just set it up.

I understand. However, as mentioned above, somehow the style sheet from Kadence is still loading which is causing the issue.

Can you try clearing all server cache and plugin cache if you are using any?

If that doesn’t help then try disabling all plugins except GP Premium to test.

[Adrian]

I have no idea why you say this is a Kadence issue since it’s GeneratePress elements that have the padding/margin problem. I explain below how I already removed some space but can’t fix it totally.

1. I found this code fix for the icon right padding and it’s working now:

.main-navigation:not(.slideout-navigation) .main-nav ul li.search-item a {
padding-right: 0;
}

Please let me know if that code is ok.

2. This is what I mean by header to content spacing issue: https://www.webpagescreenshot.info/#v2=8BHBnFAOd

I can control the sidebar from Theme Customizer to go higher by removing the margin but not the left content column.

I was also able to reduce a lot of the spacing by setting Container Top Padding to 0 but I can’t get the white space smaller than this for the content column.

I hope this makes it clear.

Thanks.

[Elvin]

I have no idea why you say this is a Kadence issue since it’s GeneratePress elements that have the padding/margin problem. I explain below how I already removed some space but can’t fix it totally.

2. This is what I mean by header to content spacing issue: https://www.webpagescreenshot.info/#v2=8BHBnFAOd

It is from Kadence’s stylesheet.
https://share.getcloudapp.com/Koud6D5D

There’s no global.min.css file on GeneratePress files.
https://share.getcloudapp.com/Jru4BN9z

It’s this one:
yourdomain.com/wp-content/themes/kadence/assets/css/global.min.css

[Adrian]

Removing Kadence files completely from wp-content fixed it.

Thank you.

[Leo]

Glad to hear 🙂

[Artur]

I have the same problem on

http://www.meblowykramik.pl

I use this code

@media (max-width: 768px) {
.separate-containers .inside-article,
.one-container .site-content {
padding: 30px;
}
}

but not working 🙁

[Artur]

@media (max-width: 768px) {
.separate-containers .inside-article,
.one-container .site-content {
padding: 30px;
}
}
.one-container .site-content {
padding:30px
}

that code start working

[Ying]

Hi Artur,

What are you trying to achieve? Have you figured it out already?

If not, could you please open a new topic?

Thanks!

[Author]

Posts