Responsive Header Image

• This reply was modified 8 years ago by Code Parrots.

Hey @irinanour,

The header image in Primer should be responsive out of the box. Do you have a link to your site so we can possibly investigate further?

Thanks!
Evan

Hello Evan,
Thanks for the reply! Very much appreciated!

Yes, the header image is responsive by default but it doesn’t work properly and shrinks/flattens my image. To bypass that I have added this style to CSS

.site-header {
height:630px;

}
But now the header image stopped being responsive…:(
Any idea how to fix this?
Thanks!
Regards, Irina

Here is the site
https://skiphireslough.ltd
thanks

Hi @irinanour,

If you specify a hard px value for the height, the container would no longer be responsive. The image tries to scale down while maintaining the current aspect ratio, but when you set a height the image width will only scale down.

You would need to create custom breakpoints in your theme to set the height of the header in px when certain widths are reached.

It’s probably easier if you remove the company name/site logo and the contact info out of the image and add them as actual HTML elements on the page, in the header. When the logo and contact info is in the header, and things scale down, you’re not going to be able to read things properly. Having them as actual HTML elements on the page will help workaround that limitation.

Evan, Hi!
Thanks a lot for the advice I have implemented it and it totally works ??
On another note I have call to action rows with phone number buttons inside them I want to make them clickable on mobiles so they initiate a phone call and the usual html code does not seem to work on them…unless I put the code into the general write up area, which falls outside the pretty button…Any idea how I make the button to call on touch?

020 7736 0355

Thanks a lot for your advice ??
Irina
https://skiphireslough.ltd

ups..

020 7736 0355

• This reply was modified 8 years ago by irinanour.
• This reply was modified 8 years ago by irinanour.
• This reply was modified 8 years ago by irinanour.
• This reply was modified 8 years ago by irinanour.
• This reply was modified 8 years ago by irinanour.
• This reply was modified 8 years ago by irinanour.