Responsive Header Image

I am not a css expert, but it appears that the img tag style sets the “min-width: 460px”. When you change the user agent width to less than 640px, the image is resized and “squashed” as you stated. I think if you were to set the min-width: to something around 640px, your image would not get “squashed”.

Hi jc32, Thanks for the reply. I tried this previously, but the header then extends beyond the navigation bar below a certain width (around 770px). I’ve changed it so you can see what’s happening…

https://www.razorweb.co.uk

Marcus,
I was thinking you could likely use 2 images, and have css select the appropriate image based on width. You could then generate an image for smaller devices that would fit your requirements. I know this would be a lot of work, but it may work. The steps would include:

• create a child theme with only 2 files(I think)
• create a css class in your child theme that references the two images
• reference the new class withing the wordpress page.

Here is a link that discusses the topic.

Thanks jc32, I appreciate the reply. Looks like an excellent solution. I’ll definitely be using that information in the future – in the meantime, all is now working fine. Big thanks again for the reply.