I'm having an issue where font sizes I'm applying to my email in media queries are being inconsistently applied. In some cases, it works fine, but in others it just gets ignored. Has anybody else encountered this or can see what I might be doing wrong?
This is the CSS:
.stack {
display:block!important;
width:100%!important;
max-width:inherit;
height:auto;
}
.stackB {
max-width:100%!important;
display:block!important;
width:100%!important;
margin: auto;
}
.imgStack {
width:100%!important;
padding-right:0;
padding-left:0;
}
.mobSp {
display:block!important;
}
.w100p {
width:100%!important;
min-width: 350px;
}
.imgFull {
width:100%!important;
height:auto!important;
}
.rPad-0 {
padding-right:0!important;
}
.lPad-0 {
padding-left:0!important;
}
.copy2 {
padding:0px 10% 0px 10%;
width:100%
}
.banner {
width:100%;
padding-left:20%;
padding-right:20%;
}
.hero{
width: 90%!important;
}
.headline{
width:92%;
}
.oneupimg {
width: 92%;
}
.oneupcopy{
width: 92%;
}
.oneup50{
width: 92%;
}
h2 {
font-family: 'Arial';
font-size: 16pt!important;
color: #002855;
padding: 0;
line-height: 16pt!important;
font-weight: bold;
}
h3 {
font-family: 'Arial';
font-size: 15pt!important;
color: #002855;
padding: 0;
line-height: 18pt!important;
font-weight: bold;
}
p a {
color: #1a7ead;
font-size:12pt!important;
}
p {
font-size: 12pt!important;
}
}
@media screen and (max-width:400px){
.stack {
display:block!important;
width:100%!important;
max-width:inherit;
height:auto;
}
.stackB {
max-width:100%!important;
display:block!important;
width:100%!important;
margin: auto;
}
.imgStack {
width:100%!important;
padding-right:0;
padding-left:0;
}
.mobSp {
display:block!important;
}
.w100p {
width:100%!important;
min-width: 350px;
}
.imgFull {
width:100%!important;
height:auto!important;
}
.rPad-0 {
padding-right:0!important;
}
.lPad-0 {
padding-left:0!important;
}
.copy2 {
padding:0px 10% 0px 10%;
width:100%
}
.banner {
width:100%;
padding-left:20%;
padding-right:20%;
}
.hero{
width: 90%!important;
}
.headline{
width:92%;
}
.oneupimg {
width: 92%;
}
.oneupcopy{
width: 92%;
}
.oneup50{
width: 92%;
}
h2 {
font-family: 'Arial';
font-size: 16pt!important;
color: #002855;
padding: 0;
line-height: 16pt!important;
font-weight: bold;
}
h3 {
font-family: 'Arial';
font-size: 15pt!important;
color: #002855;
padding: 0;
line-height: 18pt!important;
font-weight: bold;
}
p a {
color: #1a7ead;
font-size:12pt!important;
}
p {
font-size: 12pt!important;
}
}
table {
border-spacing: 0;
border: 0;
}
td {
padding: 0;
}
p {
font-family: 'Arial';
font-size: 10pt;
line-height: 12pt;
color: #63666a;
}
img {
border: 0;
}
h1 {
font-family: 'Georgia';
font-size: 20pt;
color: #002855;
padding: 0;
line-height: 20pt;
}
h2 {
font-family: 'Arial';
font-size: 12pt;
color: #002855;
padding: 0;
line-height: 12pt;
font-weight: bold;
}
h3 {
font-family: 'Arial';
font-size: 14px;
color: #002855;
padding: 0;
line-height: 23px;
font-weight: bold;
}
p a {
color: #1a7ead;
}
This module works:
<!-- CTA banner module -->
<tr>
<td>
<table width="600" role="presentation" align="center" valign="middle" bgcolor="#002855" style="background-color: #002855; padding: 10px 0px 10px 0px;">
<tr>
<!--[if (gte mso 9) | (IE)]>
<tr height="10px style="border:0;" ></tr>
<! [endif] -->
<td class="banner" width="600px" style="padding: 0px 11% 20px 11%;">
<h1 align="center" style="color:#41b6e6; font-size: 20px; padding-bottom: 0px;">
Breakfast is just the start.
</h1>
<p align="center" style="color: #FFFFFF; padding-bottom: 10px;">Copy copy copy copy copy copy</p>
<center><a rel="noopener" target="_blank" href="URL" style="background-color: #FDC661; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #002855; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i>
<![endif]-->
<span style="mso-text-raise: 15pt;">Connect to well-being support</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;"> </i>
<![endif]-->
</a></center>
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9) | (IE)]>
<tr height="10px style="border:0;" ></tr>
<! [endif] -->
<!-- end CTA banner module -->
This module does NOT work:
<!-- half image 1-up -->
<tr>
<td>
<table class="oneup50" align="center" valign="middle" style="width: 550px; vertical-align: middle; background-color: #FFFFFF; border:0; padding-bottom: 0;" role="presentation" dir="ltr">
<tr>
<td class="stackB" style="padding-bottom:0; display: inline-block;">
<table>
<tr>
<td>
<a href="URL"><img class="imgStack" style="width:287px; border: 0;" src="image" alt="Breakfast sandwich featuring rustic English Muffin and many toppings"></a>
</td>
</tr>
</table>
</td>
<td class="stack" valign="middle" align="center" width="263" style="height:219px; border:0; padding-bottom: 0; display: inline-block; vertical-align: middle!important;">
<table role="presentation" valign="middle" style="border: 0; vertical-align: middle; display:inline-block;">
<tr>
<td valign="middle" style="height: 218px; vertical-align: middle;" height="218">
<table style="display:inline-block;">
<tr>
<td>
<center>
<h2 style="padding: 0 20% 0 20%; line-height: 12pt; font-weight: bold;">
Make-ahead Breakfast Sandwich
</h2>
<p style="padding: 0 20% 10px 20%; line-height: 12pt;">
A hearty beginning for busy weekday mornings.
</p>
<a rel="noopener" target="_blank" href="URL" style="background-color: #a7a8aa; font-size: 12px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #ffffff; display: inline-block; mso-padding-alt: 0;">
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;"> </i>
<![endif]-->
<span style="mso-text-raise: 15pt;">See the recipe</span>
<!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;"> </i>
<![endif]-->
</a>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end half image 1-up -->
I thought it might be something to do with my inline styling so I removed that on some of the p tags but that didn't seem to do anything. Then added !important which had some effect but not all. Renders in Litmus also show that a module may work in one email client but not another - not the same modules failing in every client. Let me know if any of you have dealt with this before or found a fix, thanks!
It's a very complex and specific template here so I can't solve it all for you.
When you get this sort of issue, it's usually because there is an element that is too wide for the screen, and the email software is automatically shrinking that section to fit.
Normally for the best stacking/responsive behaviour, we would use inline-block rather than block, on the main container.
You would need to inline as much as possible, only relying on a <style> block where you want to progressively enhance.
Make sure images are responsive. You can set them inline to style="width:100%;height:auto;" for example, or perhaps style="max-width:100%" will be okay for your images.
Table widths are another to watch out for. I'm not sure what your outer structure is to comment on that, but you should be using max-width:600px or similar, and a fallback for Outlook. Inner tables should normally be using percentages.