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

Forum|Forum|6 years ago
December 19, 2019
1 reply
1403 views

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

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>

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

<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-b88b1867c85b?rp=00000000-0000-0000-0000-000000000000" 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>


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

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

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

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

<a href="https://web.cvent.com/event/ca6c99f9-a348-4d89-86ca-6906c444ac72/websitePage:2f509f2b-a09e-4ec3-909c-089ed7f1d9d5?rp=00000000-0000-0000-0000-000000000000" target="_blank">VENUE</a>
</td>

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

</tr>



<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-b88b1867c85b?rp=00000000-0000-0000-0000-000000000000" 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>



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



<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-02172020" target="_blank">click here</a>.
</td>
</tr>

This is what the email is supposed to look like:

Any help is appreciate, thanks!!

This topic has been closed for replies.

Correct answer Nancy OShea

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.

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