Header Image not responsive

[UmpquaWeb]

I wanted the header image to be larger than the 300px that is set in the theme, so I changed it to 500px. This works fine on a large screen, but it is not responsive. How can I fix this?

https://atthewhitehouse.com/

[UmpquaWeb]

I changed it back to 300px. I'm thinking that if I want the header image to be larger on larger screens, I need to utilize @media for smaller screens, but I'm not sure how to write that code. I'll keep looking for a solution.

[Victor Font]

If you want to make the image scalable at all screen sizes, change the .header-image .title-area class and add a max-width to it and change the width to 100% at line 1376 in style.css:

.header-image .title-area {
    margin: 0;
    max-width: 500px;
    width: 100%;
} 

Next do the same for the .header-image .site-title > a around line 1367:

.header-image .site-title > a {
    background-position: center center !important;
    background-size: contain !important;
    float: left;
    min-height: 70px;
    max-width: 500px;
    width: 100%;
} 

As an FYI, I wouldn't have used a jpg for a text image. I would use a svg image. Using a SVG means the text will remain crystal clear at any size. Using the jpg will render the text fuzzy.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[UmpquaWeb]

The image was already a jpg, and not the quality I would have liked. Hopefully that will get changed out soon. I'm not sure how to even get an SVG image, but I'm hearing more and more that that is the way to go.

Please help me with the logic behind using width 100%. Doesn't that mean it would still be 500px no matter what?

Adding your code works great for cell phone and of course large screen. But I have a second monitor that is 19" and while the logo no longer overlaps the menu bar (the bar drops down), the logo and menu are not side by side. I would ideally like to make the image smaller so they do fit side by side. Is that unrealistic? Does it look weird?

[Victor Font]

No, it would not be 500px all the time. Max-width basically means, it there's enough room use 500px max. If there's not enough room for 500px, then use whatever room you have. My setting the width to 100%, you're using all of the available space up to a maximum of 500px.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts