White Space Below header

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

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;
}

Try this:

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

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?

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

Thanks for letting me know about the extra space.

Will it help if I make the picture smaller?

Yup make the original image shorter should work.

I made it shorter but nothing changed.

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

There isn't anything the theme itself can do.

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>

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?

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

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?

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