I'm currently at a stand still and could really use some help. I'm coding an HTML email which is a first for me. I have a basic understanding of CSS and HTML, but I can't figure out for the life of me how to fix this Gmail problem, and I even know what the cause is. It seems as though the problem is coming from the only editable text region, which is the address line (Hi [name],) and which is also the only row with multiple columns. It looks like the text isn't shrinking to fit the screen, causing the neighboring cells to go crazy and expand the picture. It works great in every other ESP I tested it on, even Outlook. I attached a picture and my code. Please, if you have any advice or resources please help a noob in need.
messed up version on Android Gmail app
code
<html>
<head>
<title>Tradeshow_email_PARTY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
</td>
<td width="123" height="40" style="line-height: 0pt; font-weight: bolder;"><font face="arial" size="2px" color="#636564">Hi [name],</font>
</td>
<td>
<img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
You should nest your columns instead of colspanning it. Setting widths on the all table cells that are not 100% of the row is important also. Example:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table id="Table_01" width="600" height="1046" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="47">
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block" width="47" height="40" alt="">
</td>
<td width="123" height="40" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;">
Hi [name],
</td>
<td width="40">
<img src="http://i.imgur.com/KUO971D.png" style="display:block" width="430" height="40" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
You'll notice a few other small things I fixed up for you also. Ultimately though, you are using a lot of images in places where you shouldn't. Your grey sides should be in html and so should all text from the red area down.
This is my try based on above code:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Tradeshow_email_PARTY.jpg) -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://i.imgur.com/m2GZSwm.png" style="display:block" width="600" height="408" alt="">
</td>
</tr>
<tr>
<td width="600" style="width:600px;min-width:600px;max-width:600px;">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;">
<tr>
<td width="47" style="width:47px;;min-width:47px;padding:0px;margin:0px;">
<img src="http://i.imgur.com/RyJDbPa.png" style="display:block;min-width:47px;width:47px;" width="47" height="40" alt="">
</td>
<td width="123" style="font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight: bold; color:#636564;width:123px;min-width:123px;">
Hi [name],
</td>
<td width="430" style="width:430px;min-width:430px;">
<img src="http://i.imgur.com/KUO971D.png" style="display:block;width:430px;min-width:430px;" width="430" height="40" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/nWU4N6L.png" style="display:block" width="600" height="598" alt="">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
Related
I am tearing my hair out on how to get things to display properly in email with signatures in Mobile devices.
I tried in HTML and Word.
I have tried making it in Word which had the best result, only that when reading it in Mobile version of Gmail and Outlook, for Android, that the line heights are way too big and tables are not displaying properly as seems theyre also getting this massive line heights in them even though they are blank.
I done some research and it says that Gmail seem to change your line heights? I havent been able to work out in how to fix it.
I have just ripped back the other parts and have the basic code here:
JS Fiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
font-size: 8pt;
line-height: 12pt!important;
margin: 0;
}
</style>
</head>
<body>
<table width="320px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10.0pt 5.4pt 0pt 5.4pt; border-top: 5px solid #2E38A5; border-bottom: 5px solid #2E38A5; "><table width="320px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="10pt" colspan="4" align="right" style="" >Logo</td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="3"><p style="line-height: 12pt; margin: 0">First Last</p>
<p style="line-height: 12pt; margin: 0">Sales Director</p></td>
<td width="30"> </td>
</tr>
<tr>
<td height="10pt" colspan="3"></td>
<td height="10pt"></td>
</tr>
<tr>
<td width="22" height="10pt"></td>
<td width="18"></td>
<td width="250" align="right"><p style="line-height: 8pt">+61 (0) 400 000 000 / +000 9000 0000</p>
<p style="line-height: 8pt">boris#email.com / www.website.com</p>
</td>
<td height="10pt"></td>
</tr>
<tr>
<td height="10pt" colspan="4"></td>
</tr>
<tr>
<td height="10pt" colspan="4"></td>
</tr>
<tr>
<td height="10pt" colspan="4"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<p> </p>
</body>
</html>
Also tried some methods other people had suggested to remove the links from phone numbers and email and have had no success with tags etc. Is there a more recent trick?
Thanks. Hopefully I am specific enough.
Only on Android 6 all my Buttons looks different. Even in Outlook 10 the Buttons looks i expected. I don't understand that..Or is this a Litmus Bug?
Here ist my Button-Code Foundation Zurb Email):
<table class="button small-float-center"
style="Margin:0 0 16px 0;border-collapse:collapse;border-spacing:0;margin:0 0 16px 0;padding:0;
text-align:left;vertical-align:top;width:auto">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;
color:#000;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;
hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
<tbody>
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:#fff;
border:1px solid #000;border-collapse:collapse!important;color:#000;font-family:Helvetica,Arial,sans-serif;font-size:14px;
font-weight:400;hyphens:auto;letter-spacing:1px;line-height:1.3;margin:0;padding:1px 12px;text-align:center;vertical-align:top;
word-wrap:break-word">
<a href="#" style="Margin:0;border:0 solid #fff;border-radius:0;color:#000;display:inline-block;
font-family:Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.3;margin:0;
padding:7px 5px 7px 5px;text-align:left;text-decoration:none">WEITERLESEN</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I want to have a grid layout on my mobile app homepage and I want to do it without using 3rd party libraries.
I found some examples online but they all seem to have on flaw: the height of them is fixed, as in my case, i would like to have the height and width of the whole thing to have the actual full screen real estate of the mobile that is running on.
How I want it to look on all platforms:
The above image is a lucky scenario where everything lines up, but as soon as I add the png images into the tiles, it gets off.
Here's my attempt:
.tileCollector {
padding-left:3px;
padding-right:3px;
width: 100%;
height:100%;
table-layout: fixed;
}
.homepageStatus {
background-color: #4d82b8; /*var(--color5);*/
height:100%;
padding:30px;
}
.StatusMessage1 {
display:block;
padding-left: 1.0vh;
font-size: calc(1em + 5vmin);
line-height:1.5em;
white-space:nowrap;
font-family: 'Open-Sans';
color:white;
}
.StatusMessage2 {
display:block;
padding-left: 1.0vh;
font-size: calc(1em + 5vmin);
line-height:1.5em;
white-space:nowrap;
font-family: 'Open-Sans';
color:white;
}
.StatusMessage3 {
display:block;
padding-left:1.0vh;
font-size: calc(1em + 5vmin);
line-height:1.5em;
white-space:nowrap;
font-family: 'Open-Sans';
color:white;
}
.tileIcon {
padding-top:30px;
color:white;
height:50%;
}
.tileContainer {
padding:5px;
}
.tile {
font-size: 30px;
color:white;
width: 100%;
height: 100%;
}
div#tileTopLeft {
background-color: #FFC000; /*var(--color1);*/
}
div#tileTopRight {
background-color: #92D050; /*var(--color2);*/
}
div#tileBottomLeft {
background-color: #A6A6A6; /*var(--color3);*/
}
div#tileBottomRight {
background-color: #FF5050; /*var(--color4);*/
}
.tile-icon-label {
font-family:'Oswald';
}
<table class="tileCollector">
<tr colspan=2 height="40%">
<td colspan=2 class="tileContainer" id="StatusContainer">
<div id="homepageStatusDiv" class="homepageStatus">
<span class="StatusMessage1">Message 1</span>
<span class="StatusMessage2">Message 2 </span>
<span class="StatusMessage3">Message 3</span>
</div>
</td>
</tr>
<tr height="30%" >
<td class="tileContainer">
<div class="tile" id="tileTopLeft" ng-click="">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon1.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 1</span>
</td>
</tr>
</table>
</div>
</td>
<td class="tileContainer">
<div class="tile" id="tileTopRight">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon2.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 2</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr height="30%">
<td class="tileContainer">
<div class="tile" id="tileBottomLeft">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon3.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 3</span>
</td>
</tr>
</table>
</div>
</td>
<td class="tileContainer">
<div class="tile" id="tileBottomRight">
<table style="width:100%;height:100%;">
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<img class="tileIcon" src="icons/frontpage/icon4.png" class="contrast"/>
</td>
</tr>
<tr style="width:100%; height:100%;">
<td style="width:100%; height:100%;" align="center">
<span class="tile-icon-label">Option 4</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Also, there would be PNG images inside every tile, right in the middle, above the "Option #" text. I would like these also to be resizable and responsive as well as the text.
Is that possible?
Should I totally ditch the table idea and go with divs, or there's no actual difference?
I think flexboxgrid could be your solution. You can read/learn more about the grid here: http://flexboxgrid.com/ :) Good luck!
There is extra white space on my HTML email between the header.png and the body.png image (their table rows, actually). I cant for the life of me figure out why this is happening. It only happens on Gmail for Android and not on Gmail for Iphone. Here is the code:
<body topmargin="0">
<table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0; border: none; border: 1px solid #b76f49">
<tr>
<td width="600" style="display:block !important;">
<table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;">
<tr>
<td width="600" style="line-height:0;">
<table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;line-height:0;font-size:1px;">
<tr>
<td width="17" style="line-height:0;min-width:17px;">
<img src="headerleft.png" width="17" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
</td>
<td width="567" style="line-height:0;min-width:567px;">
<img alt="" border="0" width="567" src="header.png" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
</td>
<td width="16" style="line-height:0;min-width:16px;">
<img src="headerright.png" width="16" style="display:block !important; line-height:0;font-size:1px;" align="absbottom">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" style="display:block !important;">
<table cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border-spacing:0;">
<tr>
<td width="17" style="border-right:3px solid #b76f49; min-width:17px; font-size:1px;">
<img src="bodyleft.png" width="17" border="0" style="display:block !important; line-height:0; font-size:1px;">
</td>
<td width="561">
<table cellpadding="0" cellspacing="0" width="561" style="border-collapse: collapse; border-spacing:0;">
<tr>
<td width="20" style="font-size:1px;">
</td>
<td width="357" valign="top" style="font-family: Arial; font-size: 14px; font-color: #000;">
<p style="font-family:Arial; font-size: 16px; font-weight: bold; color:#004685;">HEader</p>
Hello,<br><br>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</td>
<td width="184" style="min-width:184px;">
<img src="bodyrightimage.png" width="170" height="400" border="0" align="right" style="font-size: 1px; line-height:0px; display:block!important;">
</td>
</tr>
</table>
</td>
<td width="30" style="border-left:3px solid #b76f49;min-width:30px;">
<img src="bodyright.png" height="400" width="16" border="0" style="display:block !important; line-height:0; font-size: 1px;">
</td>
</tr>
</table>
</td>
</tr>
HTML counts line breaks as whitespace, so if you're using table cells (ick) for layout purposes, then this code:
<tr>
<td>
<img ... />
^---line break here
</td>
^^^---indentation whitespace here
<td>
<img ... />
</d>
</tr>
will be rendered as
[img] [img]
^----linebreak+indentation as whitespace
Simple solution: don't put your </td> on a separate line:
<tr>
<td><img ../></td>
<td><img ../></td>
</tr>
Trying to code a responsive email template, and the GMail app keeps throwing me for a loop.
I've got a 3-column of images that I want to display one on top of the other (align="center"). Yet for some reason, when it goes through the gmail app, the alignment goes all wacky (two are aligned left, with some padding, one aligned right).
Suggestions to fix?
It looks like this: !(https://drive.google.com/file/d/0B26Uw_LjUlM-LWNfWnZkR3VvVEU).
Heres the code:
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap" style="border-collapse: collapse;background-color: #ffffff;">
<tr>
<td height="20">
<br />
</td>
</tr>
<tr>
<td class="padding2" style="padding: 0 20px;">
<table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td> <img mc:edit="bottom-ad1" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
</td>
</tr>
</table>
<table width="10" align="left" border="0" cellpadding="0" cellspacing="0" class="hide600" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td height="10">
<br />
</td>
</tr>
</table>
<table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td> <img mc:edit="bottom-ad2" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
</td>
</tr>
</table>
<table width="180" align="right" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td> <img mc:edit="bottom-ad3" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20">
<br />
</td>
</tr>
</table>
And the CSS:
#media only screen and (max-width: 599px) {
table[class~=button][class~=b], table[class~=color-icon-s], table[class~=color-icon-m] { width:240px !important; max-width:240px !important; height:auto;}
table[class~=color-icon-m], table[class~=color-icon-b], table[class~=color-icon-s] { float:none !important; margin:0 auto !important; }
table[class~=mid3] { margin-bottom:30px !important; }
td[class~=mid3] { margin-bottom:30px !important; }
table[class~=hide600], td[class~=hide600] { display:none !important; }
}
#media only screen and (max-width: 439px) {
td[class~=padding-2-440] { padding:0 20px !important; }
}
#media only screen and (max-width: 339px) {
table[class~=wrap], table[class~=version] { width:100% !important; }
}
Gmail App doesn't support media queries (source: https://litmus.com/help/email-clients/media-query-support/). Therefore any CSS that is not inlined will not be rendered.
That said, Gmail App should be scaling the view to fit the screen. I would change two things in your code.
Avoid setting fixed widths for your images. Do something like <img src="path/here/" style="width:100%;max-width:180px" width="180" />.
Set a width percentage for the <td> containing the image. You could try <td style="width:33.3333%;">.
I hope this helps.
You have to change the two tables align values to align="center". This will cause the tables to be centered in all clients. Then apply class "left" and "right" with floats in the media query in the head section like this:
.left { float: left !important; }
.right { float: right !important; }
Since gmail app strips the styles in the head this css won't have effect in gmail and they will remain centered. Then you will have align=centered issues with Outlook not supporting floats. To right/left align again just add conditional tags only for Outlook before and after the two centered and foated tables like this:
<!--[if (gte mso 9)|(lte ie 8)]>
<table align="right" valign="top" width="49%">
<tr>
<td valign="top" style="border-collapse: collapse;">
<![endif]-->
// your markup here: <table width="49%" align="center" ...
<!--[if (gte mso 9)|(lte ie 8)]>
</td>
</tr>
</table>
<![endif]-->
Set the align value to left and right for both tables in the conditional and you'll have it centered in gmail app and left/right in outlook.
Cheers