Copy link to clipboard
Copied
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>
<!-- 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:
Any help is appreciate, thanks!!
"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.
Copy link to clipboard
Copied
Where did you get that e-mail template?
What make & model phone are you testing it on?
Copy link to clipboard
Copied
The latest Dreamweaver responsive email template.
Tested on my iPhone 8.
Copy link to clipboard
Copied
Any ideas as to why this is happening?
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>
Copy link to clipboard
Copied
Thank you. I will try this and keep you posted. 🙂
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.
Copy link to clipboard
Copied
"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.