Responsive Header for Phone

Question

I'm having trouble with my Wordpress header: when I open my site on my phone (in vertical view), the image is cropped. It works fine on the desktop and is 1600x400 pixels.

Have attached an image of the phone view and my header.php file (Theme: Nisarg, am working on child theme).

Cheers in advance

EDIT: Photo of banner

Answer 1

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!