• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Mobile image issue -- please help

New Here ,
Jun 13, 2018 Jun 13, 2018

Copy link to clipboard

Copied

I created an HTML email from a template and the image looks wonky in the mobile version. It extends outside the email margin. Here is the file: file:///Users/JoyJohnson/Library/Containers/com.apple.mail/Data/Library/Mail%20Downloads/1F945FF4-E17B-4679-A973-F940939D8F26/P401k%20Email%20Invite%20.html. Any thoughts to address the issue?

Views

413

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 13, 2018 Jun 13, 2018

It's hard to say exactly what might make it work better, without seeing the image, but changing this line...

<div>

                    <img src="images/iStock-867803176.jpg" width="600" height="125" alt=""/>

                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">


...to something like...

<div>

                    <img src="images/iStock-867803176.jpg" style="width:100%; max-width:600px;" alt=""/>

                    <table align="center" border="0" cellpadding=

...

Votes

Translate

Translate
Community Expert ,
Jun 13, 2018 Jun 13, 2018

Copy link to clipboard

Copied

Only you can see file: // paths on your local machine.

You would need to upload your image to a server, then give us the www file path in order for us to see it. You would also need to supply the code of your html email for us to understand why and how it appears "wonky".

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 13, 2018 Jun 13, 2018

Copy link to clipboard

Copied

Here is the code:

<!doctype html>

<html>

    <head>

    <meta charset="UTF-8">

    <!-- utf-8 works for most cases -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Forcing initial-scale shouldn't be necessary -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Use the latest (edge) version of IE rendering engine -->

    <title>EmailTemplate-Responsive</title>

    <!-- The title tag shows in email notifications, like Android 4.4. -->

    <!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->

    <!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->

    <!-- CSS Reset -->

    <style type="text/css">

/* What it does: Remove spaces around the email design added by some email clients. */

      /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */

html,  body {

  margin: 0 !important;

  padding: 0 !important;

  height: 100% !important;

  width: 100% !important;

}

/* What it does: Stops email clients resizing small text. */

* {

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

}

/* What it does: Forces Outlook.com to display emails full width. */

.ExternalClass {

  width: 100%;

}

/* What is does: Centers email on Android 4.4 */

div[style*="margin: 16px 0"] {

  margin: 0 !important;

}

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,  td {

  mso-table-lspace: 0pt !important;

  mso-table-rspace: 0pt !important;

}

/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */

table {

  border-spacing: 0 !important;

  border-collapse: collapse !important;

  table-layout: fixed !important;

  margin: 0 auto !important;

}

table table table {

  table-layout: auto;

}

/* What it does: Uses a better rendering method when resizing images in IE. */

img {

  -ms-interpolation-mode: bicubic;

}

/* What it does: Overrides styles added when Yahoo's auto-senses a link. */

.yshortcuts a {

  border-bottom: none !important;

}

/* What it does: Another work-around for iOS meddling in triggered links. */

a[x-apple-data-detectors] {

  color: inherit !important;

}

</style>

    <!-- Progressive Enhancements -->

    <style type="text/css">

       

        /* What it does: Hover styles for buttons */

        .button-td,

        .button-a {

            transition: all 100ms ease-in;

        }

        .button-td:hover,

        .button-a:hover {

            background: #555555 !important;

            border-color: #555555 !important;

        }

        /* Media Queries */

        @media screen and (max-width: 600px) {

            .email-container {

                width: 100% !important;

            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */

            .fluid,

            .fluid-centered {

                max-width: 100% !important;

                height: auto !important;

                margin-left: auto !important;

                margin-right: auto !important;

            }

            /* And center justify these ones. */

            .fluid-centered {

                margin-left: auto !important;

                margin-right: auto !important;

            }

            /* What it does: Forces table cells into full-width rows. */

            .stack-column,

            .stack-column-center {

                display: block !important;

                width: 100% !important;

                max-width: 100% !important;

                direction: ltr !important;

            }

            /* And center justify these ones. */

            .stack-column-center {

                text-align: center !important;

            }

       

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */

            .center-on-narrow {

                text-align: center !important;

                display: block !important;

                margin-left: auto !important;

                margin-right: auto !important;

                float: none !important;

            }

            table.center-on-narrow {

                display: inline-block !important;

            }

               

        }

    </style>

    <link href="css/bootstrap-4.0.0.css" rel="stylesheet" type="text/css">

    </head>

    <body bgcolor="#e0e0e0" width="100%" style="margin: 0;" yahoo="yahoo">

    <table bgcolor="#e0e0e0" cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;">

      <tr>

        <td><center style="width: 100%;">

           

            <!-- Visually Hidden Preheader Text : BEGIN -->

            <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> (Optional) This text will appear in the inbox preview, but not the email body. </div>

            <!-- Visually Hidden Preheader Text : END -->

           

            <!-- Email Header : BEGIN -->

            <table align="center" width="600" class="email-container">

            <tr>

                <td style="padding: 10px 0; text-align: center" bgcolor="#ffffff"><h1>You're Invited</h1>                  <img src="images/PFP Approved Partner with AMAIA - JPEG Format.jpg" width="200" height="100" alt="alt_text" border="0"></td>

              </tr>

          </table>

            <!-- Email Header : END -->

           

            <!-- Email Body : BEGIN -->

          <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">

           

            <!-- Hero Image, Flush : BEGIN -->

            <tr> </tr>

            <!-- Hero Image, Flush : END -->

           

            <!-- 1 Column Text : BEGIN -->

            <tr>

                <td style="padding: 25px; text-align: left; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #000080;"> On behalf of AMA Insurance, we would like to invite you and your spouse to a dinner hosted by <strong>Taylor Wealth Solutions</strong>, an approved member of our Physicians Financial Partners program. <br>

                  <!-- Button : Begin -->

               

                <table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">

                    <tr> </tr>

                  </table>

               

              <!-- Button : END --></td>

            </tr>

            <!-- 1 Column Text : BEGIN -->

           

            <!-- Background Image with Text : BEGIN -->

          <tr>

                <td background="images/Image_600x230.png" bgcolor="#222222" valign="middle" style="text-align: center; background-position: center center !important; background-size: cover !important;"><!--[if gte mso 9]>

                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">

                    <v:fill type="tile" src="assets/Responsive/Image_600x230.png" color="#222222" />

                    <v:textbox inset="0,0,0,0">

                    <![endif]-->

               

                <div>

                    <img src="images/iStock-867803176.jpg" width="600" height="125" alt=""/>

                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

                    <tr>

                        <td valign="middle" style="text-align: center; padding: 25px; font-family: sans-serif; font-size: 18px; mso-height-rule: exactly; line-height: 20px; color: #ffffff;"><strong> Physicians Financial Wellness Initiative</strong></td>

                      </tr>

                  </table>

                  </div>

               

                <!--[if gte mso 9]>

                    </v:textbox>

                    </v:rect>

                    <![endif]--></td>

            </tr>

            <!-- Background Image with Text : END -->

  

  <tr>

<td valign="middle" style="text-align: center; padding: 20px; font-family: sans-serif; font-size: 18

    px; mso-height-rule: exactly; line-height: 20px; color: #555555;"><strong> Two dates and locations to choose from:<br>

</strong></td>

</tr>

           

            <!-- Two Even Columns : BEGIN -->

            <tr>

                <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">

                    <tr>

                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

                        <tr>

                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;"><strong>Dinner at Season's 52</strong><br>

Tuesday, July 10, 2018<br>

6:30 - 8:00 p.m.<br>

Located at: 245 Summit Blvd<br>

Birmingham, AL 35243<br></td>

                      </tr>

                      </table></td>

                    <td class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

                        <tr> </tr>

                        <tr>

                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;"><strong>Dinner at Firebird's Wood Fired Grill </strong><br>

Wednesday, July 11, 2018<br>

6:30 - 8:00 p.m.<br>

Located at: 7078 Eastchase Pkwy<br>

Montgomery AL, 36117<br></td>

                      </tr>

                      </table></td>

                  </tr>

                  </table></td>

            </tr>

            <!-- Two Even Columns : END -->

<tr>

                <td dir="ltr" align="center" valign="top" width="100%" style="padding: 10px;"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

                  <tr>

<td width="66.66%" class="stack-column-center"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

                      <tr>

                        <td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px; text-align: left;" class="center-on-narrow"><strong style="color:#000080;">What will be covered</strong> <br>

                          <br>

Tax reform is impacting both physicians and their practice. Please join Chuck Rolph, an ERISA attorney and Nationwide's Advanced Consulting Group, to discuss how this reform may be impacting your business, your income, and your retirement. Also, discover 10 Tax Planning Tips you need to know. <br>

<br>

We hope to see you there!<br>

<br>

<tr>

<td valign="middle" style="text-align: center; padding: 25px; font-family: sans-serif; font-size: 24px; mso-height-rule: exactly; line-height: 20px; color: #000080;"><strong> Reserve your seat today!<br>

</strong></td>

</tr>

<tr>

<td valign="middle" style="text-align: center; padding: 25px; font-family: sans-serif; font-size: 20px; mso-height-rule: exactly; line-height: 25

    px; color: #000080;"> Contact Jay Hollis:<br>

Email: <a href="jhollis@taylorws.com">jhollis@taylorws.com</a> <br>

Phone: 615-372-1380<br>

<br></td>

</tr>

  <tr>

    <td align="center" valign="top" style="padding: 10px;"><table cellspacing="0" cellpadding="0" border="0" width="100%">

      <tr>

        <td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

          <tr>

            <td style="padding: 10px; text-align: center"><img src="images/NW LOGO.jpg" width="160" height="50" alt="alt_text" border="0" class="fluid"></td>

            </tr>

          <tr>

            <td style="font-family: sans-serif; font-size: 12px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Audra Barbour<br>

              Vice President, Retirement Plans, Nationwide Financial<br></td>

            </tr>

          </table></td>

        <td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

          <tr>

            <td style="padding: 10px; text-align: center"><img src="images/AC LOGO.jpg" width="160" height="50" alt="alt_text" border="0" class="fluid"></td>

            </tr>

          <tr>

            <td style="font-family: sans-serif; font-size: 12px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"><br>

              Casey McCarthy<br>

              Vice President, DCIO Sales<br>

              American Century Investments<br>

              <br></td>

            </tr>

          </table></td>

        <td width="33.33%" class="stack-column-center"><table cellspacing="0" cellpadding="0" border="0">

          <tr>

            <td style="padding: 10px; text-align: center"><img src="images/image001.jpg" width="160" height="50" alt="alt_text" border="0" class="fluid"></td>

            </tr>

          <tr>

            <td style="font-family: sans-serif; font-size: 12px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow"> Jay Hollis, CRPS, PPC, CPFA<br>

              Retirement Plan Consultant, Taylor Wealth Solutions<br></td>

            </tr>

          </table></td>

        </tr>

    </table></td>

  </tr>

  <!-- Three Even Columns : END -->

 

  <!-- Thumbnail Left, Text Right : BEGIN -->

  <tr> </tr>

  <!-- Thumbnail Left, Text Right : END -->

 

  <!-- Thumbnail Right, Text Left : BEGIN -->

  <tr> </tr>

  <!-- Thumbnail Right, Text Left : END -->

 

</table>

            <!-- Email Body : END -->

           

            <!-- Email Footer : BEGIN -->

            <table align="center" width="600" class="email-container">

            <tr>              </tr>

          </table>

<table align="center" width="600" class="email-container">

          <tr>

              <td style="padding: 40px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: left; color: #888888;"><webversion style="color:#cccccc; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion>

                  <br>

                  <br>

                  Taylor Wealth Solutions is a member of AMA Insurance's Physicians Financial Partners program and is not affiliated with the AMA, Nationwide or American Century. Securities offered through Taylor Securities Inc., a member of FINRA/SIPC.

                  <div> </div>

                  AMA Insurance is a subsidiary of the American Medical Association. Nationwide and its representatives do not give legal or tax advice. An attorney or tax advisor should be consulted for answers to specific questions.<div> </div> Nationwide, the Nationwide N and Eagle and Nationwide is on your side are service marks of Nationwide Mutual Insurance Company. 2018 Nationwide <br>

                  <span class="mobile-link--footer">Adobe Systems Incorporated, 345 Park Avenue</span> <br>

                <br><unsubscribe style="color:#888888; text-decoration:underline;">unsubscribe</unsubscribe></td>

          </tr>

          </table>

            <!-- Email Footer : END -->

           

          </center></td>

      </tr>

    </table>

</body>

</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 13, 2018 Jun 13, 2018

Copy link to clipboard

Copied

LATEST

It's hard to say exactly what might make it work better, without seeing the image, but changing this line...

<div>

                    <img src="images/iStock-867803176.jpg" width="600" height="125" alt=""/>

                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">


...to something like...

<div>

                    <img src="images/iStock-867803176.jpg" style="width:100%; max-width:600px;" alt=""/>

                    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">

...may do the trick for you. That will allow the image to grow up to a maximum of 600 pixels wide and shrink down to whatever available space there is.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines