I'm trying to build an EDM for my client and I want the height of an elment to update on mobile but it seems that specifically the height attribute doesn't take on Yahoo Mail App for iOS and Gmail App for Android.
My style tag and media queries are both in the head and body section of the HTML file.
The background-color works so I know that the email is referencing the style tag but the height is staying at 50px and not updating to 10px on mobile.
Style tag:
<style>
#media only screen and (max-width:600px){
.mobile-height-10{ background:green !important; max-height:10px !important; min-height:10px !important; height:10px !important; }
}
</style>
HTML here:
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2" align="center" id="edmTable" style="width:100%;padding:0;margin:0;border:none;outline:0;">
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f4f4f4' align='center' class='full-width' style="width:100%;min-width:100%;background-color:#f4f4f4;">
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#f4f4f4' class='mobile-full-width' style="width:600px;background:#f4f4f4;">
<tr>
<td width="100%" height="50" style="font-size:1px; line-height:0px;min-height:50px;min-width:100%;" class="mobile-height-10"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
As I understand it, the height property should work fine in media queries: https://www.campaignmonitor.com/css/media-queries/min-height/
Does any body have any insight they can share with me as to why this isn't working as expected?
Your help is much appreciated
Moe
Here is a working example from your code. I just tested it and it works on both Gmail app (media query in head) and Yahoo (media query in body).
I have not changed the media query as you have a reason to keep it at 600px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<style type="text/css">
#media only screen and (max-width:600px){
.mobile-height-10 img{width:10px !important; height:10px !important;background-color:green !important;}
}
</style>
</head>
<body bgcolor="#ffffff" class="body" dir="ltr" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<style type="text/css">#media only screen and (max-width:600px){
.mobile-height-10 img{width:10px !important; height:10px !important;background-color:green !important;}
}
</style>
<table align="center" bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" class="mobile-full-width" style="background:#f4f4f4;">
<tbody>
<tr>
<td bgcolor="#ff0000" class="mobile-height-10" style="line-height:0px;"><img src="https://i.stack.imgur.com/mKmlV.png" style="max-width:50px;height:auto;" /></td>
</tr>
</tbody>
</table>
</body>
</html>
Cheers
Related
everyone,
I have designed a quick html doc that will be incorporated in Outlook (hence the need to have inline styles inside the HTML). Everything is looking fine on Chrome and on Safari, but IE11 is showing the below problem. The table border is messed up, like it has two colours inside it, instead of only one, like the good version on Chrome. Also, Firefox seems to be ignoring the table set for the colour and showing a beveled version of it... Does anyone have an idea about this? I'm pasting example image and my code below.
image depicting bug in IE against good version on Chrome
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Xmas Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 60px 300px 60px 300px; background-color:#d2d2d1">
<table>
<tr>
<div style="text-align:center; margin-bottom:20px">
<span style="font-family:sans-serif; font-size:10pt">If you have problems opening this message, read online here</span>
</div>
</tr>
</table>
<table border="8" rules="none" bordercolor="#8a7e70" cellpadding="0px" cellspacing="0" align="center" width="600px">
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners top">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="logo">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<h1 style="font-size:24pt; font-family:sans-serif; color:#aa212f; text-align:center">Season's Greetings</h1>
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="Xmas branches">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="/#" alt="button">
</td>
</tr>
<tr style="background-color:#ffffff" align="center">
<td>
<img src="#" alt="corners bottom">
</td>
</tr>
</table>
</body>
</html>
Thank you so much for your kindness.
When you want to set the table's border attribute, you should keep in mind that the border-style is required.
The definition and usage of CSS border you could refer to the following W3C document:https://www.w3schools.com/cssref/pr_border.asp
I suggest that you could set the border-color, border-style and border-width separately like:
<table style="border-color: #8a7e70; border-style: solid; border-width:8px;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
Or you could write three attributes together:
<table style="border:8px solid #8a7e70;" rules="none" cellpadding="0" cellspacing="0" align="center" width="600">...</table>
the running result in Chrome and IE
I have this email template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<style type="text/css">
img { max-width: 600px; -ms-interpolation-mode: bicubic;}
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
body {
width: 100%;
height: 100%;
direction: rtl;
}
.force-full-width {
width: 100% !important;
}
</style>
<style type="text/css" media="only screen and (max-width: 599px)">
#media only screen and (max-width: 599px) {
table[class*="w320"] {
width: 320px !important;
}
}
</style>
</head>
<body dir="rtl" class="body" style="width:100vw; padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none" bgcolor="#ffffff">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" style="background-color:#ffffff" width="100%">
<center>
<table cellspacing="0" cellpadding="0" width="600" class="w320">
<tr>
<td align="center" valign="top">
<table class="force-full-width" width="100%" cellspacing="0" cellpadding="20" bgcolor="#ef6900">
<tr>
<td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">
Some text
</td>
</tr>
</table>
<!-- more tables -->
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
It does work on Gmail app in Android, but in desktop version email content overflows <u></u>.
If I remove width:100vw; from body tag, desktop works fine but content overflows in mobile version. My Question is How can I make body width 100% in mobile and 600px on desktop? I tried max-width: 600px; in body style but it doesn't work. I also tried 100% instead of 100vw (because 100 vw is width of screen) and it does not work either.
I made a few changes, hope this is the outcome you were after. I have done the following:
removed width:100vwfrom the body
added the class body you are using on the body tag with the body CSS defined.
Changed the media query (removed space)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>title</title>
<style type="text/css">img { max-width: 600px; -ms-interpolation-mode: bicubic;}
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
body, .body {
width: 100%;
height: 100%;
direction: rtl;
}
.force-full-width {
width: 100% !important;
}
</style>
<style media="only screen and (max-width: 599px)" type="text/css">#media only screen and (max-width:599px) {
table.w320 {
width: 320px !important;
}
}
</style>
</head>
<body bgcolor="#ffffff" class="body" dir="ltr" style="padding:0; margin:0; display:block; background:#ffffff; -webkit-text-size-adjust:none">
<table align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="background-color:#ffffff" valign="top" width="100%">
<center>
<table cellpadding="0" cellspacing="0" class="w320" width="600">
<tbody>
<tr>
<td align="center" valign="top">
<table bgcolor="#ef6900" cellpadding="20" cellspacing="0" class="force-full-width" width="100%">
<tbody>
<tr>
<td style="background-color:#ef6900; color:#ffffff; font-size: 14px; text-align: center;">Some text</td>
</tr>
</tbody>
</table>
<!-- more tables --></td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Above code tested in Outlook 2017 and Gmail app (v8.2.11) works properly now.
If you have any questions let me know.
Your email will work just fine if you remove width:100vw; from the body tag.
I am currently working on an email template that has to be compatible with the major email providers.
According with the client I supposed to create a salutation paragraph or header on top of an image so i tried this solution which is working fine on browser but definitely not on the emails (tested on Outlook, hotmail, gmail and yahoo) and none of these read the property position: absolute(i think not sure).
The template has also to be responsive so if i resize the the screen the text should adjust regarding the width of the screen.
Because of the multiple issues on email i had to create 2 tables one inside the other in order to create a border around the image and then the second table inside to display the image itself.
The text should be inside the pink roadsign and it's Hi Margaret, which will be then dynamic.
Here is my code:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="UTF-8">
<style type="text/css">
body {
background: #dff1f6 !important;
font-family: Arial, sans-serif;
}
.preheader {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
color: transparent !important;
height: 0 !important;
width: 0 !important;
}
#media (max-width: 376px) {
.anglianlogo {
max-width: 250px !important;
}
.anglianwellcome {
font-size: 11px !important;
}
.awvideopreview {
height: 150px;
}
.mobileresize {
width: 90% !important;
font-size: 9px;
}
}
</style>
<div style="background: #dff1f6;">
<!--Container-->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="600">
<!--Main Table-->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; background: white;">
<tr>
<td>
<!--Video-->
<table width="600" cellspacing="0" cellpadding="0" border="0" style="padding-bottom: 30px; padding-left:10%; padding-right:10%; width:100%;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center; margin: 0 auto;">
<tr>
<td style="padding: 0; border: 10px solid #72b8d1;">
<a style="margin: 0 auto; display: block;">
<!--href="{{ CustomerData.vidUrl }}"-->
<img class="awvideopreview" src="https://preview.ibb.co/gKOzsv/Videopreview.gif" width="450" border="0" align="center" style="width:100%;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--End Table-->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<!--End Container-->
</div>
</body>
</html>
What do you have inside your CSS classes? Please put your code in jsfiddle so I can test it on e-mail.
HTML for e-mails takes a different approach than normaly. A lot of tables and inline styling and compatibility issues.
Checkout this link. It can help find you some problems. (but for now show us the fiddle)
https://www.htmlemailcheck.com/
You'll be best off using a background image if you need to overlay copy
https://backgrounds.cm/ is the best tool for that. Just set the dimensions, add your image link, this will generate the VML code for you and then any overlayed content is placed within the div.
Here is an example of what i use on my emails. The VML part takes care of Outlooks and the background defined in td's takes care of other email clients. I use heights on td to keep the image at a specific height (optional) and with the class you can control the height using media queries.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background: url([IMAGE PATH]); background-image: url([IMAGE PATH]); background-color:#[BACKGROUND COLOR];" height="[HEIGHT]" class="[YOUR CLASS]">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[WIDTH]px;height:[HEIGHT]px;">
<v:fill type="frame" src="[IMAGE PATH]" color="#[BACKGROUND COLOR]" />
<v:textbox inset="0,0,0,0">
<![endif]-->
[HTML CONTENT HERE]
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Let me know if this is what you were after.
Trying to create a nice html email with a border around the content, but haven't figure that out.....there is always something..... Thanks for a help!
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
like this???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Email</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ACD13C">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can wrap your table in a div, make it's background that green and width:100%, change the background of your table to white and its width to 500, the margin:0 auto will center the table, like this:
JS Fiddle- updated
<div style="width:100%; background-color:#ACD13C; padding:50px 0; ">
<table style="margin:0 auto;" bgcolor="white" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</div>
Something like that?
td {
border: 1px solid black;
}
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
do u want to see like this??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Email</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ffffff">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
my friend developer has some problem with an html email. The big problem I can see on my mail app is a big margin-top he didn't put in the css and two little margins (right and left) with the html margin: 0;
Do you have something to suggest?
Thank you very much.
<html>
<head>
<style type="text/css">
html,body{margin:0;padding:0; background-color:#f6f6f6}
table { width: 100%; height: 100%; }
span{font-family:Helvetica, Arial, sans-serif; line-height:1.7em;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f6f6f6">
<tr height="95px" valign="middle" >
<td width="100%" align="left" style="padding:15px"><img src="logo_email.png" width="154" height="46" alt="good" /></td>
</tr>
<tr bgcolor="#eeeeee" height="95px" valign="middle">
<td width="100%" colspan="2" style="padding:15px"><span style="font-size:18px;color:#414042">Thank you for subscribe our newsletter.</span><br /><span style="font-size:13px;color:#414042">The Team</span></td>
</tr>
<tr height="auto" valign="top">
<td width="100%" colspan="2" style="padding:15px"><span style="font-size:10px;color:#6d6e71">You are receiving Activity Notifications emails.</span></td>
</tr>
</table>
</body>
</html>
The layout looks fine. There is an image on top that has a relative link and may not be showing - could this be the "margin-top" you are referring to?