Help with HTML Email - Gmail Image rendering Issue

HTML & CSS
1

I have an email that I designed “mobile first”. It’s not responsive, but it should look fine on both Desktop and Mobile. It looks fine in most email apps - iPhone, Google’s “inbox” and Android email, but when it is viewed with the mobile Gmail App the images are “swished”.

1080×1920 302 KB

Please tell me how I can make Gmail show the images at 600px, or the full width of the table??

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <link type="image/x-icon" rel="shortcut icon" href="https://s3.amazonaws.com/abt-aus-images/images/favicon.jpg">
    <title>Your Travel Quote from $BRAND</title>
    <style
    type="text/css">/* Client-specific Styles */ #outlook a{padding:0;} /* Force Outlook to provide
      a "view in browser" button. */ body{width:100% !important;} /* Force Hotmail to
      display emails at full width */ body{-webkit-text-size-adjust:none;} /* Prevent
      Webkit platforms from changing default text sizes. */ /* Reset Styles */ body{margin:0;
      padding:0;} img{border:none; font-size:14px; font-weight:bold; height:auto; line-height:100%;
      outline:none; text-decoration:none; text-transform:capitalize;} #backgroundTable{height:100%
      !important; margin:0; padding:0; width:100% !important;}</style>
  </head>
    <body style="background-color:#d5d5d5; color:#535353; font-size:13pt; font-family: Verdana,Geneva,sans-serif; line-height:1.4; width:100% !important; -webkit-text-size-adjust:none; margin:0; padding:0; "
  yahoo="ignores_media_queries_and_adds_contents_to_styles" width="100%">
    <div>
      <div class="mktEditable">
        <!--Pre-Header Text=-->
        <!--Edit this text to control what is displayed in the preview pane of the email
        client-->
        <p><span style="display: none; color: #eeeeee; font-size: 1px;">I think you'll really love this vacation!</span>
        </p>
        <!--Email Container-->
        <table id="container" style="background: #d5d5d5; line-height: 1.4em;" border="0"
        cellspacing="0" cellpadding="0" width="98%" align="center">
          <tbody>
            <!--Email Header-->
            <tr>
              <td>
                <table style="background-color: #d5d5d5;" border="0" cellspacing="0" cellpadding="0"
                width="600" min-width: 600 px" align="center">
                  <tbody>
                    <tr width="600px" height="65" style="min-width: 600 px;">
                      <td style="padding-bottom: 15px; min-width: 600 px;" width="600" valign="bottom">
                        <a style="color: #7ac143;" title="Visit AboutAustralia.com" href="http://aboutaustralia.com"
                        target="_blank">
                          <img style="font-family: Verdana,Geneva,sans-serif; font-size: 18px; color: #7ac143;"
                          src="https://s3.amazonaws.com/abt-aus-images/images/Custom-quote-header.jpg"
                          alt="About Australia" width="100%!important" style="width:100%!important; min-width: 600 px;" />
                        </a>
                      </td>
                      </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <!--end Email Header-->
2

For starters, that is invalid HTML and CSS.

1 Like
3

you don’t have the images embedded in the email at all - so only those people who have turned off the security in their email program will even see the images.

HTML in emails must have ALL CSS inline in the tags themselves as most email programs don’t accept a head section at all.

4

I seriously doubt that any email client understands responsive design let alone the concept of mobile-first. Most email clients still use long outdated versions of HTML.

1 Like
5

Cool. Super helpful.

6

I see. Thanks.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.