I have the code below used in an html email and it's working as expected in all email clients, except Android 6.0 Gmail! the blue contact us button is not taking 100% of the width.
Any thoughts?
First screenshot shows how it looks like on real device, while the second one is from litmus which is not correct, but this is what I'm trying to make look like.
The code:
.cta {
text-align: left;
vertical-align: middle;
}
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#00a5c9; font-weight: normal;">
<tr>
<td class="cta" style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; padding: 10px; color: #FFFFFF; vertical-align: top; line-height: normal !important;">
<a style="text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">CONTACT US</a>
</td>
<td style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="http://via.placeholder.com/25/0f0" /></td>
</tr>
</table>
</td>
</tr>
</table>
A good way around this is the force Android 5.1 & 6.0 to display the desktop version of your email. The code snippet below needs a 600x1 transparent png to act as a full width spacer. This spacer will be hidden on all mobile clients that support media queries and allow the mobile view to render.
<tr style="line-height: 1px; mso-line-height-rule: exactly;" class="mobilehide">
<td align="center" style="min-width:600px;font-size:1px; line-height: 1px; mso-line-height-rule: exactly;">
<img src="images/android-spacer.png" alt="" width="600" height="1" style="display: block;" border="0">
</td>
</tr>
This should be added before the closing tag of your outermost table (last one before the closing body)
</td>
</tr>
<!-- add here -->
</table>
</body>
</html>
Instead of using width: 100%;, try using width: 100vw;
Certain versions of Android and Gmail do not use media queries.
https://www.campaignmonitor.com/css/media-queries/media/
This is why the blue contact button only takes up 1/3 of the Android screen, but it takes up 100% of the screen on IOS devices. IOS will respect the media query and Android will use the width="33%" from the table:
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
Since you will not post the rest of your code as expected on Stack Overflow, I cannot offer a suggestion for a workaround because I'm not sure what you're trying to do. At least you now know why it isn't working.
Good luck.
Related
I have a bottom table which lies at the bottom of the webpage bottom:30px, but when I try to tap on the input boxes to provide an input the bottom table rises up along with the keyboard pops upside.
CSS code:
.progress-table {
height: 1px;
width: 100%;
border:1px;
position:absolute !important;
bottom: 30px;
}
HTML Code
<table class="progress-table">
<tbody>
<tr>
<td style="width: 60%;"><hr style="border: 2px solid #ffb414; margin-left:15px; margin-top:0px;" align="left" width="100%" /></td>
<td style="width:93%"> <div class="hr" style="padding-bottom:19.9px"></div> </td>
<td style="width: 50%; align-content:center;">
<img src="/lib/ZSLogo.png" style="width:25px; height:12px; margin-right:15px;margin-bottom:19.9px" />
</td>
</tr>
</tbody>
When the keyboard pops up
you may notice how the bar is above the text input area.
I want it to be lying where it was before the keyboard pops.
the prior image is here:Here is the image for the normal view
In short, the orange bar should not push upwards with the appearance of the keyboard.
I am facing a strange behavior of the GMail App on Android when displaying an HTML Signature created with Outlook 2017 from Mac OS.
First of all, here is what I did:
I created an HTML signature with a simple table layout and opened in a Browser
I copied the content from the Browser Window into the Signature Panel in Outlook (Outlook -> Settings -> Signature)
I kept the original formatting after pasting the content
Now the Signature basically looks fine in the Browser, Outlook on Mac and in the iPhone standard Mail App. In Gmail on Android there are very large gaps between the table rows and I cannot find any way to control them. Of course I dod some research and ended up with recommendations discussed here and here amongst many other sources. The formatting issues have been adressed in Google Forums. Some People were able to break it down to a specific CSS class MsoNormal added by Outlook, however they are all quite old and the suggestions do not seem to work out for me. I have tried a lot of stuff and ended up with three different versions all with the same or similar results.
The first version uses divs inside the table to structure the text:
<table style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody>
<tr>
<td>
<img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top; line-height:0;' />
</td>
<td style='width:5px'></td>
<td style='vertical-align:top;'>
<div style='font-size: 11px; margin:0px; padding:0px;'>
Peter Pan<br>
Chief Executive Officer<br>
<b>The Company</b>
</div>
<div style='font-size: 9px; margin:0px; padding:0px;'>
Reach me at:<br>
peter#thecompany.com<br>
+00 324 244 20
</div>
<div style='font-size: 9px; margin:0px; padding:0px;'>
...or visit me at:<br>
My Office<br>
Office Street Nr.<br>
44556 Officetown
</div>
</td>
</tr>
</tbody>
</table>
The second uses a table within the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.MsoNormal {
margin: 0px !important;
}
</style>
</head>
<body>
<table class='tbl' style='min-width:300px; font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody class='tbl_body'>
<tr class='tbl_tr' style="display: block; white-space: nowrap;">
<td class='tbl_td' style="line-height:0; display: inline-block;"><img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' /></td>
<!--<td style='width:5px; display: inline-block;'></td>-->
<td class='tbl_td' style='vertical-align:top; display: inline-block;'>
<table class='tbl' style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody class='tbl_body'>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
<td class='tbl_td' style="display: inline-block;">Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
</tr>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap; '>
<td class='tbl_td' style="display: inline-block;">Reach me at:<br>peter#thecompany.com<br>+00 324 244 20</td>
</tr>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
<td class='tbl_td' style="display: inline-block;">...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And finally I used a 3 x 2 table layout with the image spanning 3 rows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.MsoNormal {
margin: 0px !important;
}
</style>
</head>
<body>
<table style='font-family:Arial; cellspacing:0; cellpadding:0; border:0; border-collapse: collapse; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody>
<tr style='margin:0px; padding:0px;'>
<td rowspan="3" style='line-height:0'>
<img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' />
</td>
<td style='font-size: 11px; margin:0px; padding:0px;'>Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
</tr>
<tr style='margin:0px; padding:0px;'>
<td style='font-size: 11px; margin:0px; padding:0px;'>Reach me at:<br>peter#thecompany.com<br>+00 324 244 20</td>
</tr>
<tr style='margin:0px; padding:0px;'>
<td style='font-size: 11px; margin:0px; padding:0px;'>...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
</tr>
</tbody>
</table>
</body>
In GMail the results for the table approaches look somewhat like this:
And the div approach somewhat like this:
As you can see there are large gaps between the text boxes, although there is no margin, padding, cellspacing or whatsoever.
I have fiddled around with CSS a lot and didn't come up with any solution.
I hope someone can help.
Regards,
Markus
First of all, did you try to use <meta name="viewport" content="width=device-width" /> in your head section ?
Then, did you also try to reduce the line-height of your <td>, or wrap all your informations in one <td> markup, and put some <br> break in it ?
Hope it's help.
Chaaampy.
I have one set of text in my html email that Outlook on Android does not like and sets the justification to justify even with text-align:left !important;. Every other client I've tested seems to work just fine.
sorry for the censorship
<tr bgcolor="#f1f1f1">
<td>
<table class="session-info" width="90%" cellpadding="0" cellspacing="0" align="center" style="margin: 20px auto 0px auto;">
<tr>
<td width="150px" height="0px" valign="top" style="margin: 20px 0px 0px 0px;">
<p style="font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:600; line-height:1.5em; text-align:right;">
Session #:
</p>
</td>
<td style="text-align:left;" align="left">
<p style="margin:0px 20px; font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:300; line-height:1.5em; text-align:left;">
1234
</p>
</td>
</tr>
<tr>
<td width="150px" height="0px" valign="top">
<p style="font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:600; line-height:1.5em; text-align:right;">
Session Title:
</p>
</td>
<td style="text-align:left;" align="left">
<p style="margin:0px 20px; font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:300; line-height:1.5em; text-align:left;">
Session title is long and is weirdly justified.
</p>
</td>
</tr>
<tr>
<td width="150px" height="0px" valign="top">
<p style="font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:600; line-height:1.5em; text-align:right;">
Room:
</p>
</td>
<td style="text-align:left;" align="left">
<p style="margin:0px 20px; font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:300; line-height:1.5em; text-align:left;">
123
</p>
</td>
</tr>
<tr>
<td width="150px" height="0px" valign="top">
<p style="font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666; font-weight:600; line-height:1.5em; text-align:right;">
Date and Time:
</p>
</td>
<td style="text-align:left;" align="left">
<p style="margin:0px 20px; font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #666666 !important; font-weight:300; line-height:1.5em; text-align:left;">
<span style="color:#666666;">
<font color="#666666">
Tue, Feb 00, 2017 at 11:15 AM – 12:15 PM
</font>
</span>
</p>
</td>
</tr>
</table>
</td>
</tr>
The justification can be part of the CSS in the header for the mobile version.
I can think of two things that could be affecting this:
CSS in the header targeting specific paragraphs or defined as global.
word spacing can also affect the spacing.
Since i cant see the full code its hard to tell where is happening.
Cheers
So I've been working on adding a basic table with a form to an Android app, and so far everything has been working fine except on submission. When I hit submit, I get an error and no app opens to send the email. This worked fine on Windows 10 and opened the mail client, so I'm wondering how to fix it. Here is my table/form code (Sorry for the length):
<table border="1" cellspacing="0" bgcolor="lightgrey" bordercolor="black" width="75">
<tbody>
<form action="php-form-processor.php" method="post">
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Name:</u>
</td>
<td>
<textarea rows="1" cols="33" name="Name" style="color: black; background-color: lightgrey; border-color:black; text-align: left; font-
family: Comic sans MS;">Enter your name</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Date:</u>
</td>
<td>
<textarea rows="1" cols="33" name="Date" style="color: black; background-color: lightgrey; border-color: black; text-align: left; font-
family: Comic sans MS;">Enter the date</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Exercise:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Exercise" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter exercise and time spent on each</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Breakfast:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Breakfast" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter your breakfast meal</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Lunch:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Lunch" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter your lunch meal</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Dinner:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Dinner" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter your dinner meal</textarea>
</td>
</tr>
<tr>
<td style="color:black; font-family: Comic sans MS">
<u>Snacks:</u>
</td>
<td>
<textarea rows="4" cols="38" name="Snacks" style="color: black; background-color: lightgrey; border-color: black; text-align: left;
font-family: Comic sans MS;">Enter any snacks</textarea>
</td>
</tr>
<tr>
<td style="text-align:center" colspan="2">
<input type="submit" style="font-family:Comic sans MS;font-weight:600" value="Submit Form">
</td>
</tr>
</form>
</tbody>
</table>
So what do you guys think?
UPDATE
I've since discovered that the error comes up when I set method="post", and when I set method="GET", nothing happens at all. Hopefully this will help to identify and fix the problem.
ERROR MESSAGE
Here is a pic of the error I get
This picture is with method attribute set to "post" and enctype set to "text/plain".
I'm laying out an email to be viewed across browsers and mobile platforms and mostly all is going well. It's laid out in tables, using inline styling etc. However, despite a media-query to the effect of a 600px max-width, the Gmail app on at least my and one other Android I have access to is opting to resize the images and layout to fit into it's area instead of using the media query or letting it fit itself into the window normally, either of which would be fine.
For personal use, I'm able to 'turn off auto-resize' on my phone, and then the email lays out as it would in a browser.
Is there a means to either tell the Gmail app not to auto-resize from the email size or to use the media query instead?
As Google does itself (sic!) here you should add a small hack on top of your template, right after your <body> tag:
<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;"> </div>
<!-- /Gmail hack -->
Since Gmail and Inbox will ignore the display:none, the hack will affect only those two clients.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Then set the style attribute on an image (1px gif works) that spans the full width of the page (style="min-width:600px;"). Everything will be laid out correctly, and it'll be scrollable.
Gmail in general doesn't support media queries, or the style tag in general, which is why we have to move everything inline.
Inspired by css-tricks.com, this block of code solved my issue.
Place it right before </body>.
<table class="gmail-app-fix">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
<tr>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
<td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
<img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
(Tested with Gmail 6.0 and Inbox 1.20 on Android 5.0.1, resolution 720x1280 (works on both portrait and landscape orientation)).
I just added style="min-width:290px;" to my outer most table, which is the smallest size my responsive emails view and its stopped moveong my blocks around and doesn't auto-resize. This means in Gmail App the email shows as a whole email.
The solution that worked for me was to apply a min-width: 600px to the outermost table in my template. This worked on the Android Gmail application. (Note that my layout uses 600 pixels. Your layout might be different)