Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to increase size of header area and header image in Genesis Sample?
Tagged: genesis, genesis sample, header, site-header
- This topic has 3 replies, 3 voices, and was last updated 5 years, 4 months ago by
Doug.
-
AuthorPosts
-
January 11, 2018 at 9:31 pm #215315
Doug
ParticipantHi
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
DougPREVIOUS
http://homieandlexy.com/
/* ## 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;
}January 12, 2018 at 6:11 am #215327Victor Font
ModeratorThe 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?January 20, 2018 at 8:04 pm #215569simone806
MemberHello,
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,
SimoneJanuary 25, 2018 at 11:04 am #215729Doug
ParticipantThanks, 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.comCan you tell if there's anything I'm missing?
Thank you
doug -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.