Images not responsive in Emails | Adobe Higher Education
Skip to main content
A
Ashley_D_Innoce
Level 2
February 7, 2019
Frage

Images not responsive in Emails

  • February 7, 2019
  • 1 Antwort
  • 4649 Ansichten

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

    Dieses Thema wurde für Antworten geschlossen.

    1 Antwort

    Dave_Roberts
    Dave_Roberts
    Level 10
    February 7, 2019

    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.

    A
    Ashley_D_InnoceAutor
    Level 2
    February 8, 2019

    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!

    Allgemeine NutzungsbedingungenAccessibility statement

    Loading footer...