Banner image in header not responsive

kristinehenry · October 2016

Hi there,

I put an image in the header (via the Extras in Options) and it looks fine on my laptop but on my iphone the image does not shrink down the way other images do.

Note: The image I have there now is wider than 468, but even when I put a in image that was 468, it still didn't shrink or look good on mobile.

The code of the header is: <a href="http://www.charmcitychocolate.com/" target="_blank"><img src="http://towsonflyer.com/wp-content/uploads/2016/10/choc-banner-Web.jpg" alt="" /></a>

Can be seen at towsonflyer.com

Please advise. Thanks!

Albert · October 2016

Hi,

to make banner image responsive, you need to add class="scale-with-grid" attribute for the img tag.

kristinehenry · October 2016

Thank you but where do I do that? Do I add it here? Exactly what should it say? <a href="http://www.charmcitychocolate.com/" target="_blank"><img src="http://towsonflyer.com/wp-content/uploads/2016/10/choc-banner-Web.jpg" alt="" /></a>

Thanks!

Albert · October 2016

Like we wrote above, you must to add it for the IMG tag the same way as you set src or alt attributes

kristinehenry · October 2016

But since I don't quite understand what you mean, can you please be more specific? Is this the code we're talking about? From the Extra section? <a href="http://www.charmcitychocolate.com/" target="_blank"><img src="http://towsonflyer.com/wp-content/uploads/2016/10/choc-banner-Web.jpg" alt="" /></a>

And how exactly would I add the code I need? I have tried several times and it's not working, so please advise exactly how to do it. Thanks!

Albert · October 2016

Yes, this is what we are talking about. What is not clear in above explanation? Sorry but we don't understand. If you really do not understand what you are trying to tell you, please contact with your web developer because this change may bring you more harm then good. What you are simply asking requires adding html attribute into your own html and if you really do not understand us, only your web developer would be able to explain it to you probably.

kristinehenry · October 2016

This is the current image code: <a href="http://www.charmcitychocolate.com/" target="_blank"><img src="http://towsonflyer.com/wp-content/uploads/2016/10/choc-banner-Web.jpg" alt="" /></a>

I have tried adding the formatting it as you described by adding class="scale-with-grid" to the code but it's not working. See below.

I'm not sure why you can't just insert the correct CSS into the code I'm sharing with you instead of being so mysterious. Then I can copy and paste it into my page. What you recommended is not working.

Thanks very much.

Albert · October 2016

Please send us link to page where you added above HTML code with scale-with-grid class so we can have a look on it.

kristinehenry · October 2016

Can be seen at towsonflyer.com

Albert · October 2016

Ok, thanks. So the css we gave you above works fine and it does not work only because of your custom css what you can see on https://snag.gy/8rN7B5.jpg

kristinehenry · October 2016

Ah, thank you!

Albert · October 2016

You're welcome!

Banner image in header not responsive

Comments