Banner image in header not responsive

kristinehenry

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

Hi,

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

kristinehenry

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

kristinehenry

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

kristinehenry

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. 

<a href="http://www.charmcitychocolate.com/" target="_blank"><img class="scale-with-grid" src="http://towsonflyer.com/wp-content/uploads/2016/10/choc-banner-Web.jpg" alt="" /></a>

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

kristinehenry

Can be seen at towsonflyer.com

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

kristinehenry

Ah, thank you!

Albert

You're welcome!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next