Hi Sideny,
The Gmail app has not updated. There is one possibility if you have not added class in table to wrapped in 100%. Therefor, it stacked but take up 50% of the screen width. Hope your Gmail app version above 6.11.
For your reference, I have made one example using DIR. Please see below code:
<!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>Email Monks</title>
<style type="text/css">
@media only screen and (min-width:481px) and (max-width:667px) {
.em_wrapper{
width:100% !important;
}
}
@media screen and (max-width: 480px) {
.em_wrapper{
width:100% !important;
}
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
</style>
</head>
<body class="em_body" bgcolor="#000000">
<table width="100%" border="0" class="em_full_wrap" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td valign="top" align="center">
<table width="600" align="center" class="em_wrapper" border="0" dir="rtl" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table width="300" align="right" bgcolor="#FFFF66" border="0" cellspacing="0" cellpadding="0" dir="ltr" class="em_wrapper">
<tr>
<td height="300" align="center" valign="middle" style="font-family:Arial, sans-serif; font-size:24px; line-height:26px; color:#000000;">Right Column Section</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="300" align="left" bgcolor="#66FF99" border="0" cellspacing="0" cellpadding="0" dir="ltr" class="em_wrapper">
<tr>
<td height="300" align="center" valign="middle" style="font-family:Arial, sans-serif; font-size:24px; line-height:26px; color:#000000;">Left Column Section</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Litmus link: https://litmus.com/checklist/public/8bf470b
Let us know if this helps you, otherwise you can give the HTML code, I will aid you. :)
Thanks,
Kevin
Hi Mark,
Awesome Idea for email marketing with this.
We have tried to the CSS Media Queries Level 5, it's not working on any mobile. Also, we have to define a class in each TDs where the text but doesn't work. We have provided you the HTML code used for the class defined in the <body class='lum'> tags.
Please see below HTML what we used.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Light Levels</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p{
Margin:0px !important;
Padding:0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color:inherit !important; text-decoration:none !important;
}
span.MsoHyperlink {
mso-style-priority:99;
color:inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority:99;
color:inherit;
}
/*Stylesheed for the devices width between 481px to 599px*/
@media only screen and (min-width:481px) and (max-width:599px) {
.em_main_table {
width: 480px !important;
}
.em_wrapper {
width: 100% !important;
}
.em_aside{
padding:0px !important; /*Update the values as required*/
}
.em_hide{
display:none !important;
}
.em_full_img{
width:100% !important;
height:auto !important;
}
.em_align_cent{
text-align:center !important;
}
}
/*Stylesheed for the devices width between 0px to 480px*/
@media only screen and (max-width:480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper{
width: 100% !important;
}
.em_aside{
padding:0px !important; /*Update the values as required*/
}
.em_hide{
display:none !important;
}
.em_full_img{
width:100% !important;
height:auto !important;
}
.em_align_cent{
text-align:center !important;
}
}
@media screen and (luminosity: normal) {
body .lum {background-color: #ddd; color: #111;}
}
@media screen and (luminosity: dim) {
body .lum {background-color: #444; color: #fff;}
}
@media screen and (luminosity: washed) {
body .lum {background-color: #fff; color: #333;}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0px; padding:0px;" class="lum">
<!--Full width table start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td height="80" align="center" valign="middle" bgcolor="#093500" style="font-family: Arial, sans-serif; color:#ffffff; font-size:12px; text-align:center; line-height:16px;"><webversion style="text-decoration:underline; color:#ffffff;">View online</webversion></td>
</tr>
<tr>
<td align="center" valign="top" style="font-family:Arial, sans-serif; color:#000000; font-size:22px; line-height:26px; text-align:center; padding:20px 20px;">Responding to environmental light levels with CSS Media Queries Level 5</td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, sans-serif; color:#000000; font-size:14px; line-height:18px; text-align:left; padding-bottom:15px; padding-left:15px;"><singleline label="Title">light levels with CSS Media Queries Level 5</singleline></td>
</tr>
<tr>
<td><img class="em_full_img" src="http://edmimages.net/edm/css_light/image.jpg" width="650" height="200" alt="" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="15" style="line-height:0px; font-size:0px;"> </td>
</tr>
<tr>
<td align="center" valign="top" style="font-family:Arial, sans-serif; color:#000000; font-size:22px; line-height:26px; text-align:center; padding:20px 20px;">Responding to environmental light levels with CSS Media Queries Level 5</td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, sans-serif; color:#000000; font-size:14px; line-height:18px; text-align:left; padding-bottom:15px; padding-left:15px;"><singleline label="Title">light levels with CSS Media Queries Level 5</singleline></td>
</tr>
<tr>
<td><img class="em_full_img" src="http://edmimages.net/edm/css_light/image.jpg" width="650" height="200" alt="" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="20" bgcolor="#093500"> </td>
</tr>
<tr>
<td><unsubscribe> </unsubscribe></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!--Full width table End-->
<!--Increase/decrease the number of ( ) as per the template width-->
<div class="em_hide" style="white-space:nowrap;font:20px courier;color:#FFFFFF"> </div>
</body>
</html>
Thanks,
Kevin
Hi Becs,
This is awesome, it's working.
Thank you so much !!! :)
Kevin
Thanks
Email Monks
Hi Jacob,
Can you please share us with HTML code, so we will help you.
Thanks
Kevin
Email Monks
Hi,
Emails longer than 7000px get truncated in Outlook. Try removing unnecessary code by unchecking the “Remove unnecessary HTML code” option in Settings. This will remove the excess corrupted HTML, if any from the code.
Or
If that isn’t the case, try disabling add-ins that change the email display behavior: File -> Options -> Add-Ins. Select Manage: COM Add-Ins and click Go!
Or
Try disabling Hardware acceleration: File -> Options -> Advanced. This might help in some cases.
Hope this works! For more, feel free to reach out to me at kevin@emailmonks.net.
Hi Kathleen,
Can you please share us with whole HTML code and which ESP you are using?
Thanks
Kevin
Email Monks
Using http or https is depended on the server. If the site is secure, the server detects it and we can see https://, otherwise it shows http://. Users can use either of the two in <img src="">.
Actually, it totally depends on the server and we can not control it manually. You can check several sites as an example.
Hi Lauren,
Can you please elaborate what you faced challenges? As well as can you please share us with your HTML code, so we will help you..!!
Awaiting for reply.
Kevin
Email Monks