I just checked the site various screen resolutions and the problem is with the larger screens. Anything over 1024×768 the images’ height is smaller and smaller, with more padding around the width on larger screens.
Hi!
A new version of the theme went live yesterday so perhaps you updated the theme?
A lot of users had problems fitting their image, so the header image height was changed to fit the height of the content.
In the header background option in the customizer you should find image sizing and positioning, such as “cover”, “contain”, center top, center bottom and so on.
If that doesn’t help you achieve what you want, you can try the javascript that I used in version 1.9 of Aaron.
This is untested with version 2.1
//Set the header (hero unit) to full height
jQuery(document).ready(function($){
var winHeight = $(window).height();
// set initial div height
$('.site-header').css({
'min-height': winHeight,
});
// make sure div stays full height on resize
$(window).resize(function(){
$('.site-header').css({
'min-height': winHeight,
});
});
});
Thanks Carolina. I did try image sizing & positioning using customizer but that didn’t work. The height of the image changed very little. The only thing I could do, to give the image a bit more height (instead of cutting off almost 2/3s of the image) – I even tested it using the default image – was to include the “call for action” button (even though I really didn’t want to use it. This added more height.
I’d like to try your javascript solution but my knowledge of javascript is limited. Can you give me an idea of where/how I would put that into place.
Thanks so much
Jackie
Ah, yes, you can put it at the bottom of either navigation.js
or skip-link-focus-fix.js. Both files are in the js folder.
Thanks so much Carolina!! That did it!
