Header image not fully displayed


#1

My header image is being cut off, and I wish to display the entire image. I uploaded it in the recommended size of 1920 × 550 pixels. Could you look at the header image at http://jwagnerwoodworks.com and let me know what I can do to display the entire image? If you need to see it, the image itself is here:
http://jwagnerwoodworks.com/wp-content/uploads/2019/02/JWW_Siteheader_logo.jpg

I found five other posts on this topic and tried all the code snippets suggested in those and none of them worked. If it helps to know for problem-solving, I do have two snippets of CSS code already added (and they work) - one to remove the opacity, and another to make the menu bar skinnier. Otherwise, it’s the standard template.

Thanks!
Lori


#2

Hello Lori, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

header.has-banner div.site-branding {
    padding: 300px 0 250px;
}

header.site-header::after {
    background-position: 21.8% top;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#3

This worked perfectly on my desktop, but isn’t sizing down for my cellphone. Hmm. Any thoughts?

Take care, Lori


#4

Hello Lori,

Try to use this CSS code instead of previous:

header.has-banner div.site-branding {
    padding: 16vw 0 12vw;
}

header.site-header::after {
    background-size: contain;
}

@media (max-width: 991px) {
    #masthead > .container {
        padding-top: 57px
    }

    header.site-header::after {
        background-position-y: 57px;
    }
}

Kind Regards, Roman.


#5

Brilliant, Roman, I am VERY happy. The header is adjusting itself perfectly to any device from a desktop to tablets to a phone. This is exactly what I wanted!

Best wises - hope something goes wonderfully right for YOU today, too.

Lori


#6

Great, you are welcome Lori!

And thank you very much :slight_smile:

Kind Regards, Roman.


closed #7