Re: Images not responsive in Emails

Ashley_D_Innoce
Level 2

Images not responsive in Emails

Hello,

I have an email going out today and am new to Marketo. I have placed an image in by uploading the image to the design section of Marketo and placing it in my campaign. Please note I have cloned an old campaign and edited it according to the new email.

Here's the code for the email and a screenshot of the problem on mobile:

<!-- START OF FULL WIDTH IMAGE-->

<div class="mktEditable" id="geomirror-blog-2" mktoname="geomirror-blog-2">

<p><img src="http://go.didax.com/rs/538-FVP-740/images/Parts120blogImage %28003%29.jpg" alt="Parts120blogImage (003).jpg" height="166" width="600" style="display: block; margin-left: auto; margin-right: auto;" /></p>

<!-- END OF FULL WIDTH IMAGE-->

2 REPLIES 2
Dave_Roberts
Level 10

Re: Images not responsive in Emails

Hey Ashley-

It looks like the image has a fixed height and width but nothing to make it responsive. As a quick-fix you could add ​max-width:100%; height:auto; to your inline style and that should prevent it from being any larger than the container it's placed into.

<!-- START OF FULL WIDTH IMAGE-->

<div class="mktEditable" id="geomirror-blog-2" mktoname="geomirror-blog-2">

<p><img src="http://go.didax.com/rs/538-FVP-740/images/Parts120blogImage %28003%29.jpg" alt="Parts120blogImage (003).jpg" height="166" width="600" style="display: block; margin-left: auto; margin-right: auto; max-width:100%; height:auto;" /></p>

<!-- END OF FULL WIDTH IMAGE-->

I'd also recommend that you remove the image from the <p> (paragraph) by getting rid of the <p> and trailing </p> around the image. This may have been inserted by Marketo when you updated the editable area -- there are some settings in Admin that you'll want ot change (the defaults add paragraphs). In any case, you might run into some issues in Outlook where it'll only display the image as tall as a line of text when it's placed into a <p>.

You can find these settings by going to Admin > Email > Edit Text Editor Settings. There is also an option for Landing Pages in there that adds a <div> by default, I'd also set that to none while you're there.

Screenshot_020719_022603_PM.jpg

Ashley_D_Innoce
Level 2

Re: Images not responsive in Emails

Hi Dave, thanks for the insight! I just tried that and it worked like a charm!!

I'll also definitely check out the admin editor settings, thanks again for your help!