When the browser scales down, the theme sets a minimum height for the image, whilst the image width becomes smaller and smaller. The image is set to fill the complete banner, so therefore the image is cropped at the sides.
If you add the following code to the ‘Additional CSS’ in the customizer, it should work. With this code, the aspect ratio of 4:1 is maintained. The width is the same as the browser and the height scales according to a 4:1 ratio.
@media (max-width: 767px) { //Only apply to devices smaller than 767px wide, because the problem was only caused on smaller screens. If you want to maintain the 4:1 on every device, remove this line plus the very last bracket.
.site-header {
width: 100% !important; //Width of screen
padding-top: 25%; //Determines the aspect ratio (1/4)
min-height: 0px !important; //Overrides the minimum height
}
}
I can’t exactly determine if the !important is needed, it gives those settings extra priority. I added them just to be sure that the min-height property overrides the default one. If you have time, try removing the !important parts and check if it still works. If that’s the case, you leave out the !important.
Let me know how it does!