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

Why does my email blast look correct on the screen, but off on a phone display

Explorer ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

Here is what my email blast looks like on a phone:

 

IMG_3956.PNG

 

It should all be the same width, but it is not for some reason. Can someone tell me in my code where I went wrong? Thanks

Code: (just the top portion)

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Announcing InterFace Net Lease West to be held February 18th in Los Angeles</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. 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; -webkit-box-shadow: #666666 0 0 18px 0; border-radius: 5px;}
.button-td:hover,
.button-a:hover {background: #1278cc !important;border-color: #1278cc !important;}

.topnav {display: flex; justify-content: center; background-color: #0f64aa; margin: 0; padding: 0;}
.topnav a {color: #ffffff; text-align: center; padding: 12px 20px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 14px; display: block;}
.topnav a:hover {background-color: #ffffff; color: #0f64aa;}

.fadeimg {transition: 0.3s !important; opacity: 1 !important;}
.fadeimg:hover {transition: 0.3s !important; opacity: 0.5 !important;}

#body a,
#body a:hover,
#body a:visited{color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size:16px; text-decoration: none;}

#body2 a,
#body2 a:hover,
#body2 a:visited{color: #ffffff; text-decoration: none;}

#body3 a,
#body3 a:hover,
#body3 a:visited{color: #ffffff; font-family: Helvetica, Arial, sans-serif;}

/* Media Queries */
@media screen and (max-width: 680px) {

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

 

Sample code for the rest:

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="680" class="email-container">
<tr>
<td class="full-width-image"><a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:daa6d2c6-f6ff-465c-8c83..." target="_blank"><img src="http://francemediaincftp.cloudaccess.net/IF20/NLW/NLW-Banner.jpg" alt="Net Lease West" border="0" align="center" style="width: 100%; max-width: 680px; height: auto;"></a></td>
</tr>

<!-- Navbar : BEGIN -->
<tr>
<td align="center" class="topnav">
<a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:645d57e4-75eb-4769-b2c0..." target="_blank">AGENDA</a>

<a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:4a9f1ae7-fd5e-40ea-a47b..." target="_blank">SPEAKERS</a>

<a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:4d198d11-766a-41bd-99e5..." target="_blank">REGISTER</a>

<a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:58241f23-8cd9-481a-adab..." target="_blank">SPONSORS</a>

<a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:2f509f2b-a09e-4ec3-909c..." target="_blank">VENUE</a>
</td>
<!-- // stealth link // -->
<div name="divHrefB" style="display:none;height:0px;width:0px;overflow:hidden;visibility:hidden;mso-hide:all"><a href="http://francemediainc.com/partner-emails/">Distributed by France Media Inc.</a></div>
<!-- // stealth link // -->
</tr>
<!-- Navbar : END -->

<!-- 1 Column Text : BEGIN -->
<tr>
<td align="center" style="font-size: 28px; line-height: 38px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding: 20px 20px 15px 20px;">9th Annual InterFace Net Lease West to be held February 18th in Los Angeles</td>
</tr>
<tr>
<td align="center" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: 600; color: #a70e12;"><i>Registration and Room Block Now Open</i></td>
</tr>
<tr>
<td style="padding: 15px 40px 20px 40px; font-family: sans-serif; font-size: 16px; mso-height-rule: exactly; line-height: 23px; color: #555555;">
<p><i>Seniors Housing Business</i> and France Media are pleased to announce that the <b>6th annual InterFace Seniors Housing West conference will take place February 20, at the Omni Downtown in Los Angeles.</b></p>
<p>InterFace brings together top dealmakers and providers from the West Coast, as well as national investors, developers, operators and owners who are active in <b>California, Washington, Oregon, Arizona, Nevada, Colorado, Utah or New Mexico.</b></p>
<p>Registration is now open, and our "Early Bird" rate of $395 is available through January 16th. To register, <a href="https://fmi.omeclk.com/portal/wts/ucmcnjqdw7aqsxejF9meBgFdg" target="_blank">click here</a>.</p>
<p>InterFace Seniors Housing West is the conference where new ideas are introduced, fresh concepts exchanged and new relationships forged.</p>
<p>If you are interested in being a sponsor or exhibitor, please reach out to <a href="mailto:egoldberg@francemediainc.com" target="_blank">Eric Goldberg</a> at 404-832-8262 or <a href="mailto:rkelley@francemediainc.com" target="_blank">Rich Kelley</a> at 914-468-0818.</p>
<p>Make sure to reserve your seat at the leading regional seniors housing conference on the West Coast.</p>
</td>
</tr>
<tr>
<td style="padding-bottom: 40px;">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
<tr>
<td class="button-td"><a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:daa6d2c6-f6ff-465c-8c83..." target="_blank" style="background: #0f64aa; border: 15px solid #0f64aa; padding: 10px 15px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 24px; line-height: 1.1; font-weight: 600; text-align: center; text-decoration: none; display: block; border-radius: 5px;" class="button-a">REGISTER NOW!</a></td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->

<!-- Background Image : BEGIN -->
<tr style="line-height: 1px;">
<td align="center">
<img src="http://francemediaincftp.cloudaccess.net/IF20/NLW-Networking-Web.jpg" class="img-max fadeimg" alt="InterFace Conference Panel">
</td>
</tr>
<!-- Background Image : END -->

<!-- 1 Column Text : BEGIN -->
<tr>
<td bgcolor="#dde8fd" align="left" style="padding: 15px 40px 25px 40px; font-size: 16px; line-height: 23px; font-family: Helvetica, sans-serif; color: #666666; border-radius: 0 0 30px 30px;">
A block of sleeping rooms is available at the Omni Los Angeles for guests of InterFace Net Lease West for $289. Act now, this rate is only available until Friday, January 24th and is subject to availability. To book a room, either call 1-800-THE-OMNI (843-6664) and reference the InterFace Conference room block, or to book online, please <a href="https://www.omnihotels.com/hotels/los-angeles-california-plaza/meetings/interface-conference-group-0..." target="_blank">click here</a>.
</td>
</tr>

 

This is what the email is supposed to look like:

Screen Shot 2019-12-19 at 2.55.51 PM.png

 

Any help is appreciate, thanks!!

TOPICS
Browser , Code , How to , Other , Preview

Views

1.1K

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 , Dec 20, 2019 Dec 20, 2019

"I want everything to fill the screen on the phone."

 

I'm afraid that's not going to happen.  Your template has a max-width of 680 pixels. And iPhone 8 has a 1334-by-750-pixel resolution at 326 ppi.

 

 

 

Votes

Translate

Translate
Community Expert ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

Where did you get that e-mail template? 

What make & model phone are you testing it on?

 

Nancy O'Shea— Product User, Community Expert & Moderator

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
Explorer ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

The latest Dreamweaver responsive email template.

Tested on my iPhone 8.

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
Explorer ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

Any ideas as to why this is happening?

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 ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

Add a style rule to your image to keep it constrained to device width.

max-width:100%;

 

<!-- Background Image : BEGIN -->
<tr style="line-height: 1px;">
<td align="center"><img style="max-width:100%;" src="http://francemediaincftp.cloudaccess.net/IF20/NLW-Networking-Web.jpg" class="img-max fadeimg" alt="InterFace Conference Panel"></td>
</tr>
Nancy O'Shea— Product User, Community Expert & Moderator

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
Explorer ,
Dec 20, 2019 Dec 20, 2019

Copy link to clipboard

Copied

Thank you. I will try this and keep you posted. 🙂

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
Explorer ,
Dec 20, 2019 Dec 20, 2019

Copy link to clipboard

Copied

Unfortunately, that did not work. The image I added a max-width of 100% to just made it smaller with the rest of the text. I want everything to be as wide as the sponsor-image section. To fill the screen on the phone.

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 ,
Dec 20, 2019 Dec 20, 2019

Copy link to clipboard

Copied

LATEST

"I want everything to fill the screen on the phone."

 

I'm afraid that's not going to happen.  Your template has a max-width of 680 pixels. And iPhone 8 has a 1334-by-750-pixel resolution at 326 ppi.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator

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