I am pretty new to developing HTML Emails and I have a problem with media queries.
This is what is happening: when I finish developing my email and resize the screen to check that it is responsive, it works as planned and adapts to any screen size. However, after using MailChimp to send a test email to see if the email is actually responsive, I see that the Mobile apps (such as Outlook and Gmail) don't actually adapt the email size to the screen size.
They actually make the font and images smaller so that the whole content fits as if it were a laptop
Does anyone know why this is happening and how I can stop it?
Here is my head tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PROMONOTICIAS</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}
p {margin: 0px 0px !important;}
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
/*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
/*STYLES*/
table[class=full] { width: 100%; clear: both; }
/*################################################*/
/*IPAD STYLES*/
/*################################################*/
@media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ffffff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
table[class=devicewidth] {width: 440px!important;text-align:center!important;}
table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
table[class="sthide"]{display: none!important;}
img[class="bigimage"]{width: 420px!important;height:219px!important;}
img[class="col2img"]{width: 420px!important;height:258px!important;}
img[class="image-banner"]{width: 440px!important;height:106px!important;}
td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}
td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}
img[class="logo"]{padding:0!important;margin: 0 auto !important;}
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
@media only screen and (max-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: #ffffff; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: #ffffff !important;
pointer-events: auto;
cursor: default;
}
td[class="mobile-title"]{font-size: 15px !important;}
a[class="mobile-text"]{font-size: 16px !important;}
td[class="mobile-disclaimer"]{font-size: 13px !important;}
table[class=devicewidth] {width: 320px !important;text-align:center!important;}
table[class=devicewidthinner] {width: 300px !important;text-align:center!important;}
table[class="sthide"]{display: none!important;}
img[class="bigimage"]{width: 300px !important;height:136px!important;}
img[class="col2img"]{width: 300px !important;height:160px!important;}
img[class="image-banner"]{width: 320px !important;height:68px!important;}
}
</style>
Sending HTML Emails can be pretty annoying, since most of the Client Applications don't support all CSS Properties, and some even cut off the <head>. It feels a bit like creating a webpage in 1995. I think Media Queries won't work in most cases, since they just get cut off! You have to make it responsive with inline CSS (sigh!). I know, thats not cool, but its the best way to create an HTML Mail, which is compatible to most clients. You may want to take a look at this page for a small overview, what you can use, and what propably not: