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

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

• php
• images
• headers

Share Improve this question edited Jun 16, 2020 at 14:24 Eric asked Jun 13, 2020 at 16:56 EricEric 1533 bronze badges 2

• Hi @Eric how is the image supposed to look like 'normally'? Is it the homepage of neotericreflections? – ralphjsmit Commented Jun 13, 2020 at 17:58
• @ralphsmit the normal banner is 1600x400px and looks like the banner on the phone but with the ends in place - I've put another one in currently while this problem is being fixed. EDIT: attached photo of desired banner – Eric Commented Jun 16, 2020 at 14:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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!