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.
Related
I'm very new to coding and I'm trying to code only the footer of an email through hubspot - does anyone have experience creating modules on hubspot? I'm finding it really hard and I also don't know much about coding in emails.. Inline css is very annoying. Honestly, I know it looks like a mess. And can I even include HubL variables in html? Hubspot creates them for emails. Ugh Help.
<!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>Footer</title>
<style type="text/css">
.ExternalClass {width: 100%;}
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #06AE8F;}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#ffffff;}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%;}
.ExternalClass {width: 100%;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
(min-device-width: 601px)
width: 600px !important;
.col380 {
width: 380px!important;
}
.col425 {
width: 425px!important;
}
.col380 {
width: 380px!important;
}
}
</style>
</head>
<body yahoo="" bgcolor="#f6f8f1" style="margin: 0; padding: 0; min-width: 100%;">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
</td><td class="footer" bgcolor="#ffffff" style="padding: 20px 30px 15px 30px;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="footercopy" style="color: #C0C0C0; font-family: Helvetica; font-size: 12px; mso-line-height-rule:exactly";>
<i>Copyright © 2019 DonorSearch, All rights reserved.</i><br>
Our mailing address is:<br>
{{ site_settings.company_name }}<br>
{{ site_settings.company_street_address_1 }}<br>
{{ site_settings.company_city }}, {{ site_settings.company_state }} {{ site_settings.company_zip }}<br>
410-670-7880<br>
<a class="link1" a="" href="mailto:email#email.com" style="color: #D6B229; text-decoration: underline;">email#email.com</a><br>
Want to change how you receive these emails?<br>
<a class="link" a="" href="{{ unsubscribe_link }}" style="color: #06AE8F; text-decoration: underline;">You can update your preferences</a> or
<a class="link" a="" href="{{ unsubscribe_link_all }}" style="color: #06AE8F; text-decoration: underline;"> Unsubscribe from mailing lists.</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
</tr></table></td>
</tr>
</table>
</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
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
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.
I am making a newsletter with foundation. I need to get my background to go to full width, but at the moment the full width is defined in center:
My Example
How can I make the background color go full width? Foundation has made a prewritten CSS, where the width should be defined:
.wrapper {
width: 100%; }
#outlook a {
padding: 0; }
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
.bgcolor {
background-color: #fff;
}
.bgcolor--blue {
background-color: #ccd8db;
}
.bgcolor--content--light {
background-color: #ebe4cf;
}
.bgcolor--footer {
background-color: #e8e8e8;
}
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container" align="center">
<tbody>
<tr>
<td>
<!-- Row 1 -->
<table class="row collapse" border="1px solid red">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<center>
<img src="http://bbacher.weebly.com/uploads/8/4/6/2/8462405/6449752.jpg" alt="Logo" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<center>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Table have padding and cellspacing by default. You'll need to manually remove these in order for your content to take up the full width and height of the element.
You'll need to do this on every table tag.
<table cellpadding="0" cellspacing="0">
https://jsfiddle.net/wb9qg34e/
With regards to the table not being responsive. You have set static widths to the table and there is a class pulling through that has a min width on
td.large-12 center, th.large-12 center {
min-width: 532px;
}
If you remove the width from the table.container and add a new class like below, it should be fully responsive.
td.large-12 center, th.large-12 center {
min-width: auto;
}
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>