Participant

Answered

Mobile image issue -- please help

Forum|Forum|7 years ago
June 13, 2018
2 replies
547 views

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?

issues with mobile size

This topic has been closed for replies.

Correct answer Jon Fritz

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

<div>

...to something like...

<div>

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

J

joyf53086863Author

Participant

Here is the code:

<!doctype html>

<html>

<head>

<title>EmailTemplate-Responsive</title>

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

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

</head>

<tr>

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

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

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

</table>

</td>

</tr>

<tr>

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

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

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

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

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

<tr>

<tr>

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

</tr>

<tr>

<tr>

<tr>

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

<tr>

</tr>

<tr>

Casey McCarthy<br>

Vice President, DCIO Sales<br>

American Century Investments<br>

</tr>

</table></td>

<tr>

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

</table>

</table>

<tr>

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

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>

</center></td>

</tr>

</table>

</body>

</html>

Jon Fritz

Correct answer

Community Expert

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

<div>

...to something like...

<div>

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

Jon Fritz

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded