[Resolved] White Space Below header

Home Forums Support [Resolved] White Space Below header

Home Forums Support White Space Below header

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1115261
    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.

    #1115403
    Leo
    Staff
    Customer Support

    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 🙂

    #1115431
    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;
    }
    #1115519
    Leo
    Staff
    Customer Support

    Try this:

    .site-logo, img.header-image {
        width: 100%;
        height: 200px;
    }
    #1115526
    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?

    #1115599
    Leo
    Staff
    Customer Support

    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

    #1115606
    metcomllc@aol.com

    Thanks for letting me know about the extra space.

    Will it help if I make the picture smaller?

    #1115615
    Leo
    Staff
    Customer Support

    Yup make the original image shorter should work.

    #1116111
    metcomllc@aol.com

    I made it shorter but nothing changed.

    #1116218
    Leo
    Staff
    Customer Support

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

    There isn’t anything the theme itself can do.

    #1116257
    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>
    #1116348
    Leo
    Staff
    Customer Support

    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?

    #1116467
    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

    #1116913
    Leo
    Staff
    Customer Support

    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?

    #1116965
    metcomllc@aol.com

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.