[Resolved] White Space Below header

[metcomllc@aol.com]

There seems to be a lot of white space between the primary navigation and my first text paragraph. Please assist me.

Is there a way to make my current header full width on sky desktop? It is already full width on my mobile.

[Leo]

Hi there,

– Have you tried reducing the top padding of the container?
https://docs.generatepress.com/article/content-padding/

– To make the header full width, make sure the container widths are set to full:
https://docs.generatepress.com/article/header-layout/

Then upload a picture with width around 2000px.

Let me know if this helps 🙂

[metcomllc@aol.com]

The padding seems to have worked but the header was already set to full.

Is there CSS you can give me similar to below, but for my desktop.

#mobile-header img { width: 100%; height: auto; }
h1.entry-title {
display: none;
}

[Leo]

Try this:

.site-logo, img.header-image {
    width: 100%;
    height: 200px;
}

[metcomllc@aol.com]

That worked. Is there a way to adjust the height (make it smaller)?

Is there a way to minimize the whit space between the shortcode for categories below the first paragraph of text?

[Leo]

Not possible to use CSS to set the height without making the image distorted – I’ve edited the CSS above so you can see it yourself:
https://generatepress.com/forums/topic/white-space-below-header/#post-1115519

You have a space added which is adding the extra space:
https://www.screencast.com/t/i5qg82tLz

[metcomllc@aol.com]

Thanks for letting me know about the extra space.

Will it help if I make the picture smaller?

[Leo]

Yup make the original image shorter should work.

[metcomllc@aol.com]

I made it shorter but nothing changed.

[Leo]

Have you cleared your caching plugin after re-uploading the image?

There isn’t anything the theme itself can do.

[metcomllc@aol.com]

I cleared the cache but nothing changed.

Please note that I using the following element hook code:

<div class="site-logo hide-on-mobile">
    <a href="https://www.tryhypnosisnow.com/hypnosis-downloads/" title="Hypnosis Downloads NYC" rel="home">
        <img class="header-image" alt="NYC Hypnosis Downloads MP3s" src="https://www.tryhypnosisnow.com/hypnosis-downloads/wp-content/uploads/2019/12/best-hypnosis-downloads.jpg" title="Hypnosis Downloads NYC">
    </a>
</div>

<div class="mobile-site-logo hide-on-desktop hide-on-tablet">
    <a href="https://www.tryhypnosisnow.com/hypnosis-downloads/" title="Hypnosis Downloads NYC" rel="home">
        <img class="header-image" alt="NYC Hypnosis Downloads MP3s" src="https://www.tryhypnosisnow.com/hypnosis-downloads/wp-content/uploads/2019/12/best-hypnosis-downloads.jpg" title="Hypnosis Downloads NYC">
    </a>
</div>

[Leo]

Yup the code is showing that this image is used which looks correct to me:
https://www.tryhypnosisnow.com/hypnosis-downloads/wp-content/uploads/2019/12/best-hypnosis-downloads.jpg

Maybe you didn’t shorten the image enough?

What if you simply cut it in half to test?

[metcomllc@aol.com]

I already cut in half twice.

Details
File name: best-hypnosis-downloads-1.jpg
File type: image/jpeg
Uploaded on: December 28, 2019
File size: 8 KB
Dimensions: 300 by 74 pixels

[Leo]

The code is still showing that this is the image being used:
https://www.screencast.com/t/n6SGtPpfJVn7

Not the best-hypnosis-downloads-1.jpg you mentioned above.

Also there might be some confusion with how width: 100%; works.

If we use a screen of 1500px in width to view an image of 300 by 74px is with 100% width applied, the image will actually become 1500 by 370px – both width and height will be multiply by 5 times.

I’m not sure if that’s what you wanted?

[metcomllc@aol.com]

No. I want full width but not 5 times the size.

[Author]

Posts