How to increase size of header area and header image in Genesis Sample?

[Doug]

Hi

I’m using the Genesis Sample theme and am wanting to increase the height of the home page header area by scaling it up to 450p, relative to browser window size. Then increase the header image to scale to the space allotted.

And I’d like this to also scale correctly on mobile.

Here’s the homepage I’m referring to where you can see how the header area and header image are currently being presented. Also, on mobile, the header area doesn’t scale down to a similar aspect ratio of what’s on the desktop.
http://homieandlexy.com/

The header image on that page is 2704?—1083.

I searched and found an article for another Child Theme, but there are some differences that are throwing me off.

So I started by increasing the .title-area and .header-image sections, per below. But you can see from the link above I’m not getting good results.

Below are code changes, so far. Any additional direction would be greatly appreciated.
Thanks
Doug

PREVIOUS
/* ## Title Area
--------------------------------------------- */
.title-area {
float: left;
padding: 10px 0;
width: 300px;
}
.header-image .title-area {
margin: 0 auto;
max-width: 300px;
padding: 0;
}
.header-full-width .title-area {
float: none;
width: 100%;
}
NEW
/* ## Title Area
--------------------------------------------- */
.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%;
}
----------------//-----------------
I also changed the following code:
PREVIOUS
/* # Site Header
---------------------------------------------------------------------------------------------------- */
.site-header {
min-height: 160px;
}
.site-header > .wrap {
padding: 20px 0;
}
NEW
/* # Site Header
---------------------------------------------------------------------------------------------------- */
.site-header {
min-height: 465px;
}
.site-header > .wrap {
padding: 20px 0;
}

http://homieandlexy.com/

[Victor Font]

The process is the same for any Genesis theme. Did you change the size in functions.php as well? Perhaps this will help: https://victorfont.com/change-logo-size-in-genesis-themes/

---

Regards,

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

[simone806]

Hello,
I am new to using the Genesis framework. I came to this forum to find out how to correctly reduce the size of the Gallery Pro theme header. I believe this response answers my question as well, but I am not clear on Genesis child theme best practices. Is it recommended to edit the functions.php file directly in Gallery Pro? or should I create a my_functions.php file to add edits?
Many thanks,
Simone

[Doug]

Thanks, Victor. That's a simple to follow article.

I made the changes per the article, from a previous width/height of 600x160 to 1200x450 in functions.php. And also changed the min header height to 450p in style.css.

However, I'm still having two problems.
1. The header image is heavily pixelated, despite being 2704 ?— 1083
2. On mobile, the header locks at the larger height, and I'd like it to scale for smaller browsers.

Here's the site page
http://www.homieandlexy.com

Can you tell if there's anything I'm missing?
Thank you
doug

[Author]

Posts