emailgmailhtml-emailresponsive
Responsive 3 column html email layout last column image is one pixel too high in gmail and outlook
I have a 3 column responsive email layout (code is below). This works almost perfectly. It shows well on mobile and even in outlook desktop client. But for some reason, the last image is one pixel too tall in Gmail and Outlook.com. I know this is probably because of the 100% width, but does anyone know how to fix it? You'll see that I even set pixel widths and heights on my images, but because the container has 100% width, I think that is causing it to fail. Any hacks for this?
I've added the image and a Photoshop guide and you can clearly see that the last one extends one pixel below the others.
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-right: 5px;padding-left:10px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84953" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/4adc30d0-46be-4e10-bdd5-b28937548ba4.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner">
<i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/1/17/Free-Resources-for-Planning-Your-Next-Orlando-Vacation/" style="color:#808080;text-decoration:none;" title="">Free Resources for a Perfect Orlando Holiday</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Whether it’s your first trip to Orlando or you’re coming back for more, Visit Orlando has free, trusted resources designed to help you plan your perfect Orlando holiday, including our Official Visitor Center, Live Chat assistance, an innovative mobile app and much more!</span></div>
</td>
</tr>
</table>
</td>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px; padding-right: 5px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84871" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/0739b042-e92e-42a9-b294-9be63f8a3000.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/discounts-and-tickets/" style="color:#808080;text-decoration:none;" title="">Save Big With Orlando Deals & Discounts</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Not only is Visit Orlando a trusted source for discounted tickets to the world’s most popular theme parks and attractions, but we’re also your source for bargains throughout the destination. Save on resorts, dining, shopping and everything else you’ll want to do in Orlando!</span></div>
</td>
</tr>
</table>
</td>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px;padding-right:10px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84872" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/db9decce-c593-4bbd-a3c2-e819df747c47.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/2/07/Have-a-Blast-at-the-Newest-Attractions-in-Orlando" style="color:#808080;text-decoration:none;" title="">Blast Off With Orlando’s Newest Thrills</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Orlando is constantly improving. In fact, we added so many new attractions in 2017 that, even if you’ve visited recently, you probably haven’t seen them all — starting with all-new thrills at Walt Disney World Resort, Universal Orlando Resort, SeaWorld Orlando and LEGOLAND Florida Resort!</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the CSS in the head tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
@-ms-viewport{ width: device-width;}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
.container {width: 100% !important;}
.footer { width:auto !important; margin-left:0; }
.content-padding{ padding:4px !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
img { max-width:100% !important; height:auto !important; max-height:auto !important;}
.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
.photo img { width:100% !important; max-width:100% !important; height:auto !important;}
.drop { display:block !important; width: 100% !important; float:left; clear:both;}
.footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
.nav4, .nav5, .nav6 { display: none !important; }
.tableBlock {width:100% !important;}
.responsive-td {width:100% !important; display:block !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body, .tb_properties{font-family: Arial !important; font-size: 25px !important; color: #808080 !important; line-height: 1.5 !important; padding: 0px !important; }.buttonstyles{font-family: arial, helvetica, sans-serif !important; font-size: 16px !important; color: #FFFFFF !important; padding: 10px !important; }h1{font-family: Arial !important; font-size: 28px !important; color: #202020 !important; line-height: 1 !important; }h2{font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important; }h3{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }a:not(.buttonstyles){line-height: 1 !important; }.mobile-hidden{display: none !important; }
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
.block3up { padding: 20px !important;background:#efefef;}
.blockme2{font-size:22px !important;}
.blockme{font-size:25px !important;}
}
@media only screen and (max-width: 640px) {
.container { width:100% !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
.photo img { width:100% !important; height:auto !important;}
.nav5, .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family: Arial, Helvetica, sans-serif ;
font-size:16px;
color:#808080;
line-height:1;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
Solution
If you remove height: auto; and add max-height: 120px; from your img style sheet. Your problem will be resolved.
I might recommend checking your full email in a testing service like Litmus or Campaign Monitor. Currently what you're showing is not responsive and strange things happen to the tables and images depending on the web client used to view them.
If you are doing responsive, add max-height to the @media query to fine-tune the output.
Good Luck.
- Adding a static image to WooCommerce email template
- Sendgrid can't receive emails in application
- Continue processing more email filter rules after "Pipe to Program" completes?
- Microsoft Outlook Mail Analyzer
- Is it possible to know the country a mail come from?
- Problem with Azure Email Communication Service Custom Domain
- Python 3: Move email to trash by uid (imaplib)
- Overriding the "email" attribute on Notifiable Trait Laravel
- How do I send email to user by appending my domain name to the user name in Google Apps Script?
- Exim's DKIM signatures do not verify on Microsoft servers (outlook, hotmail) *only*
- How do you extract email addresses from the 'To' field in outlook?
- how to send styles with html email
- SLURM notify via text instead of email
- How to make responsive email work with yahoo mobile app?
- Configure wildcard catch-all email with Postfix
- Capture SMTP errors in .NET
- Why would adding FileProvider Path option in the manifest.xml file cause OPEN button in the Appinfo window disappear?
- Symfony how to validate an EmailType by not allowing emails without an ending dot something
- Scheduled Mail in asp.net
- VB .NET Console App - Send Mail from shared Mailbox with MS Graph - 404 Mailbox is either inactive, soft-deleted, or is hosted on-premise
- Send Sendgrid Email Without Subject
- Send email with attachment
- MailKit Reply Email Not Threading Correctly with Original Message
- MSgraph Java SDK, retrieve well-know folder
- Cannot implicitly convert type 'System.Net.Mail.MailAddress' to 'SendGrid.Helpers.Mail.EmailAddress'
- AKS outbound email configure for SMTP whitelist
- How to send email from any one email using Microsoft Graph
- How do I resolve builtins.ConnectionRefusedError error in attempting to send email using flask-mail
- How to send an email from JavaScript
- Stripe, is it possible to search a customer by their email?