first of all I know this has been asked a lot like these two : Building HTML emails .... and Can I put a ... tag .... but I didn't find a definite valid answer !! or I couldn't understand well!!
I already checked The Ultimate Guide to CSS and it said that using <style></style> tag in <head></head> is ok by gmail and yahoo as well as @media . but my template don't have any style in gmail or yahoo . I want to send responsive emails so I need @media also is there any way to use :nth() in emails?
I put the snippet below , I really appreciate if someone help me! I used putsmail to test it on gmail and yahoo mail.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove extra space added to tables and cells in Outlook.
*/
table,
td {
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
}
/**
* Better fluid images in Internet Explorer.
*/
img {
-ms-interpolation-mode: bicubic;
}
/**
* Remove blue links for iOS devices.
*/
a[x-apple-data-detectors] {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
}
/**
* Fix centering issues in Android 4.4.
*/
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
body {
max-width: 1100px !important;
height: 100% !important;
margin: 0 auto !important;
font-family: Tahoma;
background-color: #f7f7f7;
padding: 20px;
}
.rtl{
direction: rtl;
}
.ltr{
direction: ltr;
}
/**
* Collapse table borders to avoid space between cells.
*/
/* table {
border-collapse: collapse !important;
} */
a {
color: #1a82e2;
}
img {
height: auto;
line-height: 100%;
text-decoration: none;
border: 0;
outline: none;
}
p{
margin: 0px;
}
.main-padding{
padding: 20px;
}
.main_table{
background-color: #fff;
border: 1px solid #dddddd;
}
.header_section{
width: 100%;
color: #1a1b41;
border-bottom: 3px solid #ffc107;
font-size: 12px;
}
.title_section{
width: 100%;
color: #1a1b41;
border: 3px solid #1a1b41;
font-size: 15px;
text-align: center;
padding: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.status_section{
width: 100%;
color: #fff;
border-radius: 4px;
padding: 10px;
}
.status_section--success{
background-color: #28a745;
}
.status_section--fail{
background-color: #dc3545;
}
.status_section .icon_wrapper{
width: 62px;
height: 62px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.16);
}
.status_section .icon{
width: 26px;
margin: 18px;
}
.items_section_wrapper{
width: 60%;
padding: 10px 20px;
vertical-align: top;
}
.items_section{
width: 100%;
margin-bottom: 20px;
}
.items_section .avatar{
width: 40px;
height: 40px;
border-radius: 50%;
}
.items_section .info{
padding: 0px 8px;
}
.items_section .info .title{
margin-bottom: 2px;
text-align: start;
font-size: 14px;
color: #1a1b41;
font-weight: 700;
}
.items_section .info .location{
text-align: start;
font-size: 12px;
color: #505050;
}
.items_section .card{
background-color: #e4e4e4;
padding: 4px;
border-radius: 4px;
}
.items_section .card .image{
vertical-align: top;
width: 20%;
}
.items_section .card img{
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 15px;
box-shadow: 0px 2px 5px #a5a5a5;
}
.items_section .card .info_wrapper{
vertical-align: top;
}
.items_section .card .title{
font-size: 14px;
color: #000;
padding: 8px;
}
.items_section .card .price{
padding: 8px;
font-size: 18px;
color: #000;
}
.items_section .card .price{
padding: 8px;
font-size: 18px;
color: #000;
}
.items_section .card .price-total{
padding: 8px 0;
font-size: 18px;
color: #000;
font-weight: 800;
text-align: end;
}
.items_section .card .sign{
padding: 0 4px;
font-size: 16px;
color: #505050;
font-weight: 800;
}
.items_section .card .number{
font-size: 18px;
color: #000;
font-weight: 800;
}
.items_section .card .attr{
padding: 0px 8px;
}
.items_section .card .dot{
color: #ff3366;
font-size: 16px;
}
.rtl .items_section .card .value{
color: #1a1b41;
font-size: 12px;
margin-bottom: 4px;
width: 50%;
font-weight: 800;
float: right;
}
.ltr .items_section .card .value{
color: #1a1b41;
font-size: 12px;
margin-bottom: 4px;
width: 50%;
font-weight: 800;
float: left;
}
.items_section .shipping_wrapper{
width: 100%;
font-size: 12px;
font-weight: 700;
}
.items_section .shipping_wrapper .icon{
width: 20px;
}
.details_wrapper{
width: 100%;
}
.total_recipient_table-side{
padding: 10px 20px;
vertical-align: top;
}
.total_recipient_table-bottom{
display: none;
}
.detail_table{
width: 100%;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
border-radius: 4px;
border-spacing: 0;
}
.detail_table .header{
font-size: 16px;
font-weight: 700;
text-align: start;
padding: 8px;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .rows:nth-child(even){
background-color: #eee;
}
.detail_table .rows .title{
font-size: 12px;
font-weight: 700;
padding: 8px;
text-align: start;
min-width: 100px;
}
.detail_table .rows .text{
font-size: 12px;
font-weight: 700;
padding: 8px;
text-align: end;
}
.btns_section{
width: 100%;
}
.btns_section .btn_wrapper{
display: flex;
flex-wrap: wrap;
}
.btns_section button{
font-size: 13px;
padding: 8px;
min-width: 100px;
color: #fff;
text-transform: uppercase;
border: none;
margin: 4px;
}
.btns_section button:hover{
cursor: pointer;
}
.btns_section button:focus{
outline: none;
}
.btn_s{
background-color: #28a745;
}
.btn_d{
background-color: #dc3545;
}
.btn_w{
background-color: #ffc107;
}
.btn_i{
background-color: #17a2b8;
}
.action_section button{
background-color: #ffc107;
font-size: 15px;
padding: 10px;
min-width: 150px;
color: #fff;
text-transform: uppercase;
border: none;
}
.action_section button:hover{
background-color: #ffc107ee;
cursor: pointer;
}
.action_section button:focus{
background-color: #ffc107ee;
outline: none;
}
.footer_section{
width: 100%;
border-top: 3px solid #757575;
}
.footer_section td{
font-size: 10px;
text-align: center;
color: #1a1b41;
}
.footer_section a{
text-decoration: none;
color: #1a1b41;
}
.footer_section a:hover{
color: #ffc107;
}
.mobile{
display: none;
}
@media (max-device-width: 767px),
(max-width: 767px) {
body{
padding: 5px;
}
.main-padding{
padding: 10px 5px;
}
.items_section_wrapper{
width: 100%;
padding: 10px 5px;
}
.items_section .card .image{
width: 25%;
}
.items_section .card img{
border-radius: 4px;
}
.items_section .card .attr{
padding: 8px 0 0;
}
.items_section .card .price{
padding: 8px 0 0;
font-size: 16px;
}
.ltr .items_section .card .price{
float: left;
}
.rtl .items_section .card .price{
float: right;
}
.items_section .card .price-total{
padding: 8px 0 0;
font-size: 16px;
}
.items_section .card .sign{
padding: 0 4px;
font-size: 14px;
}
.items_section .card .number{
font-size: 16px;
}
.total_recipient_table-side{
display: none;
}
.total_recipient_table-bottom{
display: table-row;
}
.desktop{
display: none;
}
.mobile{
display: table;
}
}
</style>
</head>
<!-- ltr / rlt -->
<body >
<!-- start preheader -->
<div style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0;">
<!-- A preheader is the short summary text that follows the subject line when an email is viewed in the inbox. -->
Your Order submitted
</div>
<!-- end preheader -->
<!-- start body -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="center" >
<table >
<tr>
<td>
Example.com
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" >
<table >
<tr>
<td>
Your <span style="color: #ffc107;">Order</span>
</td>
</tr>
<tr>
<td>
Thanks for choosing us!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" >
<!-- for failed change status_section--success to status_section--fail ALSO img src to times-circle-solid.png -->
<table >
<tr>
<td style="width:70px;">
<div >
<img src="check-circle-solid.png">
</div>
</td>
<td style="font-weight: 700;font-size: 14px;">
payment was successful<span> - your invoice code: </span><span>1235789</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tr>
<td >
<table >
<tr >
<td style="width: 40px;">
<img src="1.jpg" >
</td>
<td >
<p >Vendor Name</p>
<p >location</p>
</td>
</tr>
<tr>
<td colspan="2" >
<table style="width: 100%; border-spacing: 0;">
<tr>
<td >
<img src="1.jpg">
</td>
<td >
<table style="width: 100%;">
<tr>
<td colspan="2">Lorem Ipsum</td>
</tr>
<tr >
<td colspan="2" >
<p ><span >• </span>color: red</p>
</td>
</tr>
<tr >
<td >12 $<span >×</span><span >10</span></td>
<td >120 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 100%;" >
<tr>
<td colspan="1">
<p ><span >• </span>color: red</p>
</td>
</tr>
<tr>
<td>
<p >12 $<span >×</span><span >10</span></p>
<p >120 $</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table >
<tr>
<td style="width: 24px;">
<img src="truck-solid.png" >
</td>
<td>shipping</td>
<td style="text-align: end;">20 $</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td >
<table >
<tr>
<td style="padding-bottom:24px;">
<table >
<tr>
<td colspan="2">calc</td>
</tr>
<tr >
<td >Items</td>
<td >120 $</td>
</tr>
<tr >
<td >Tax Fee</td>
<td >10 $</td>
</tr>
<tr >
<td >Shipping</td>
<td >20 $</td>
</tr>
<tr >
<td >Total</td>
<td >150 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table >
<tr>
<td colspan="2">recipient</td>
</tr>
<tr >
<td >full name</td>
<td >John Doe</td>
</tr>
<tr >
<td >email</td>
<td >[email protected]</td>
</tr>
<tr >
<td >phone</td>
<td >00000000000</td>
</tr>
<tr >
<td >address</td>
<td >.............</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr >
<td >
<table >
<tr>
<td style="padding-bottom:24px;">
<table >
<tr>
<td colspan="2">calc</td>
</tr>
<tr >
<td >Items</td>
<td >120 $</td>
</tr>
<tr >
<td >Tax Fee</td>
<td >10 $</td>
</tr>
<tr >
<td >Shipping</td>
<td >20 $</td>
</tr>
<tr >
<td >Total</td>
<td >150 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table >
<tr>
<td colspan="2">recipient</td>
</tr>
<tr >
<td >full name</td>
<td >John Doe</td>
</tr>
<tr >
<td >email</td>
<td >[email protected]</td>
</tr>
<tr >
<td >phone</td>
<td >00000000000</td>
</tr>
<tr >
<td >address</td>
<td >.............</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" >
<table >
<tr>
<td >
<a href="#"><button >Accept</button></a>
<a href="#"><button >Delete</button></a>
<a href="#"><button >Reject</button></a>
<a href="#"><button >Pend</button></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding-top: 40px;padding-bottom: 40px;">
<table >
<tr>
<td>
<a href="#"><button>Button</button></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" >
<table >
<tr>
<td>
Copyright © 2020 example.com All rights reserved | <span><a href="#">Home</a></span> | <span><a href="#">Contact Us</a></span> |
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end body -->
</body>
</html>CodePudding user response：
You are encountering two different email bugs here, one in Gmail, and the other in Yahoo. Here’s what’s going on and how to fix it.
1. Gmail
Gmail is very picky about certain styles. And whenever Gmail sees something it doesn't like, Gmail will remove the entire <style> tag that contains the problematic style. You can read more about how Gmail removes styles that include special characters here. In order to find what was wrong with your code, I split your one and only <style> tag into multiple ones. Then I sent myself the email and inspected the code in Gmail, and looked at what Gmail kept. I was then able to conclude that what Gmail doesn't like with your code are the box-shadow declarations with the / syntax.
.detail_table{
width: 100%;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
border-radius: 4px;
border-spacing: 0;
}
.detail_table .header{
font-size: 16px;
font-weight: 700;
text-align: start;
padding: 8px;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
The solution here is simply to isolate the problematic styles in their own <style> tag. So remove the two box-shadow declarations from your giant <style> tag, and add a second <style> tag with only the following:
.detail_table{
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .header{
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
2. Yahoo
I'm assuming you're testing on Yahoo Android. On Android, Yahoo removes content from the <head> tag. (You can read more about this here.) But it only does so for the first <head> tag inside an email. I know what you're thinking, HTML usually has only one <head> element anyway. But turns out we can add a second <head> tag, and Yahoo will keep the content inside this second <head>. So the general practice for this, to get responsive emails to work in Yahoo on Android, is to add an empty <head> tag first, and then a real <head> with all your content second. Surprisingly, this is very well supported across email clients and rendering engines. Here’s an example:
!DOCTYPE html>
<html>
<head></head>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
…
}
</style>
</head>
<body>
…
</body>
</html>
Also note that Yahoo has a bug with CSS comments and it’s usually a good practice to remove all CSS comments before sending an email.