Increase the height of header area for Genesis Sample theme

[Doug]

Hi

I'm using the Genesis Sample theme, and am wanting to increase the home page header area to 450px high, and for the image to scale to fit that size.

I'd also like this to scale correctly for mobile browsers.

Here's the page I'm trying to change.
http://homieandlexy.com/

The header image on that page is 2704?—1083, however, when I increase the header height area in the code below, the image doesn't increase in size.

.site-header {
min-height: 160px;
}
.site-header > .wrap {
padding: 20px 0;
}

And per the code below, I've also increased the title-area and header-image.title-area widths.

.title-area {
float: left;
padding: 10px 0;
width: 1400px;
}
.header-image .title-area {
margin: 0 auto;
max-width: 1200px;
padding: 0;
}
.header-full-width .title-area {
float: none;
width: 100%;
}

Any assistance with this will be greatly appreciated.
thx
doug

http://homieandlexy.com/

[Victor Font]

Increasing the image to 450px will make it fuzzy, since it is only 240px high. Change the min-height dimension for the image in this code at line 1085 in style.css:

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

---

Regards,

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

[Doug]

Thanks, Victor. That worked great for increasing the image size.
I’m still having 2 issues, though.

1.
On mobile the header vertical space is very high
Is this due to the 450p height I just created? Is there a way to have the header height scale according to browser window size. Ideally it would scale height and width -- the way the image does -- as the browser window expands or contracts. Something that would work for both desktop and mobile?

2.
Image is pixelating
I’m not sure why, as the image size is 2704 ?— 1083, which is considerably larger than the header space.

Here’s the page link for reference.
http://homieandlexy.com/

Thank you,
doug

[Author]

Posts