1

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

phone view EDIT: Photo of banner enter image description here

2
  • Hi @Eric how is the image supposed to look like 'normally'? Is it the homepage of neotericreflections.com? – ralphjsmit Jun 13 '20 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 Jun 16 '20 at 14:19
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!

2
  • Works perfectly, thank you so much! The !important lines weren't required to do the job. So nice to have contributors like yourself helping out newbies. Hope you have a great day. – Eric Jun 17 '20 at 15:53
  • Hi @Eric, good to hear! Congrats. Would you mind marking the answer as correct? Thanks! – ralphjsmit Jun 17 '20 at 18:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.