2 Replies Latest reply on Feb 8, 2019 8:11 AM by Ashley D'Innocenzo

    Images not responsive in Emails

    Ashley D'Innocenzo

      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-->

        • Re: Images not responsive in Emails
          Dave Roberts

          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

          1 of 1 people found this helpful