HTML responsive email - table not adhering to max-width:100%
1
I am learning how to use media queries in coding responsive HTML emails and am struggling. I found a great email template at Really Good Emails (http://email.reallygoodemails.com/t/ViewEmail/i/5F9007F241DBA1802540EF23F30FEDED/5F41B898D731AECE2A1BF84ACBDD178B) and tried to code from scratch. I was able to get the desktop version, but when adding media queries, I couldn't get the middle section (.buttons) to adhere to a max-width of 100%.
What am I doing wrong here? I'm sure others are struggling with this too. I tried using the tables-only approach i read at Litmus.
HTML below.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong>💊 SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong>🏃 THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong>🎲 PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong>🍭 COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html>html css responsive-design inline
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
add a comment |
1
I am learning how to use media queries in coding responsive HTML emails and am struggling. I found a great email template at Really Good Emails (http://email.reallygoodemails.com/t/ViewEmail/i/5F9007F241DBA1802540EF23F30FEDED/5F41B898D731AECE2A1BF84ACBDD178B) and tried to code from scratch. I was able to get the desktop version, but when adding media queries, I couldn't get the middle section (.buttons) to adhere to a max-width of 100%.
What am I doing wrong here? I'm sure others are struggling with this too. I tried using the tables-only approach i read at Litmus.
HTML below.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong>💊 SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong>🏃 THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong>🎲 PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong>🍭 COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html>html css responsive-design inline
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
Is the other code within your style tag (in the media query) rendering correctly? Anytime I've built an email template, all of my CSS had to be inline. Perhaps the CSS within the style tag isn't processing at all.
– silencedogood
Nov 26 '18 at 15:51
You should never start with desktop. You should start with Mobile then move on to tablet and than code for desktop
– J.vee
Nov 26 '18 at 15:53
add a comment |
1
1
1
I am learning how to use media queries in coding responsive HTML emails and am struggling. I found a great email template at Really Good Emails (http://email.reallygoodemails.com/t/ViewEmail/i/5F9007F241DBA1802540EF23F30FEDED/5F41B898D731AECE2A1BF84ACBDD178B) and tried to code from scratch. I was able to get the desktop version, but when adding media queries, I couldn't get the middle section (.buttons) to adhere to a max-width of 100%.
What am I doing wrong here? I'm sure others are struggling with this too. I tried using the tables-only approach i read at Litmus.
HTML below.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong>💊 SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong>🏃 THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong>🎲 PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong>🍭 COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html>html css responsive-design inline
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
I am learning how to use media queries in coding responsive HTML emails and am struggling. I found a great email template at Really Good Emails (http://email.reallygoodemails.com/t/ViewEmail/i/5F9007F241DBA1802540EF23F30FEDED/5F41B898D731AECE2A1BF84ACBDD178B) and tried to code from scratch. I was able to get the desktop version, but when adding media queries, I couldn't get the middle section (.buttons) to adhere to a max-width of 100%.
What am I doing wrong here? I'm sure others are struggling with this too. I tried using the tables-only approach i read at Litmus.
HTML below.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong>💊 SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong>🏃 THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong>🎲 PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong>🍭 COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong>💊 SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong>🏃 THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong>🎲 PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong>🍭 COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Really Good Emails</title>
<style type="text/css">
body {
background-color:#f7f7f7;
color:#5f5f5f;
font-family: Roboto,Tahoma,sans-serif;
}
h1 {
color:#404040;
}
.header {
background-image: url("http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/email-background2.jpg");
border-spacing: 0px;
border-collapse: collapse;
padding-bottom:0px;
}
a {
text-decoration:none;
display: block;
}
.btn {
opacity:1;
}
.btn:hover {
opacity:.8;
}
@media only screen and (max-width:510px) {
body {max-width: 100% !important;padding:0 !important;margin:0 !important;}
.header {max-width: 100% !important; padding:0 !important;margin:0 !important;}
.header img {width:300px !important;height:auto !important;}
.friday {max-width:100% !important;display:flex;align-items: center;}
.friday img {max-width:100% !important;height:auto !important;}
.advertise img {max-width:100% !important;height:auto !important;}
.buttons span {max-width: 100% !important;padding: 5px !important;}
.buttonsintro {max-width:100% !important;}
.buttons {max-width:100% !important;}
.buttons a {max-width:100% !important; padding: 10px 5px 10px 5px !important;}
.buttons h1,p {max-width:100% !important; padding: 10px 5px 10px 5px !important}
.advertise {max-width:100% !important;}
.friday h1 {padding: 0 0 0 15px !important;}
.curved {display:none !important;}
p {font-size:1rem !important;}
td {max-width: 100% !important;}
.footer {max-width: 100% !important;padding:5px 10px 0px 10px !important;}
.footer p {font-size:.8rem !important;}
.cliff1 {max-width:100% !important;}
.cliff2 {max-width:100% !important;display:block !important;}
.cliff2 td {margin:0px !important;}
.space {display:none !important;}
}
</style>
</head>
<body>
<table class="header" width="100%" bgcolor="#fe4c44" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 25px 0 25px 0; display:block;" align="center">
<a href="https://reallygoodemails.com/?utm_campaign=complete-your-profile&utm_source=ReallyGoodEmails&utm_medium=email">
<img style="display:block;" width="600px" height="64px" alt="Really Good Emails" src="http://i1.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/header_RGE-logo-9900000000079e3c.png">
</a>
</td>
</tr>
<tr>
<td style="width:600px;" align="center">
<img class="curved" style="display:block; max-width:600px;" width="600px" height="32px" src="http://i2.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/top-rounded3-9900000000079e3c.png">
</td>
</tr>
</table>
<table class="friday" align="center" width="600px" bgcolor="white">
<tr>
<td align="center" color="#5f5f5f;"><img width="560px" height="398px" alt="Feedback Friday"
src="http://i3.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/feedback-compressed-9900000000079e3c.png">
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">Template Eyes</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">Not all pre-built email templates are created equal. Some are born with looks so dreamy that you hardly need to change a thing. Others, as we will see in today's Feedback Friday, may need some work done on them but can walk a line of being overdone - kind of like a movie star who gets too much plastic surgery.
</p>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">This week we jump into a recently submitted B2B email to discuss where you can go wrong in those kinds of scenarios. (For clarity, we are talking about email template scenarios, not plastic surgery scenarios.)
</p>
</td>
</tr>
<tr>
<td>
<a style="color:white; text-decoration: none;" href="https://www.fadavis.com"><table class="btn" style="margin-top:25px; margin-left:15px; border-radius:5px;" align="left" bgcolor="#fe4c44">
<tr>
<td style="color:white;padding:10px 15px 10px 15px; font-size:.81rem; line-height:25px;" align="center">
<strong>BE WISE & CUSTOMIZE</strong>
</td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px" src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="advertise" align="center" width="600px" bgcolor="#f7f7f7">
<tr>
<td style="padding:20px 0 20px 0; font-size:.7rem;" align="center">This email is supported by:</td>
</tr>
<tr>
<td class="advertise" style="padding-bottom:35px;" align="center"><img width="560px" src="http://i5.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/ReallyGoodEmail_Banner_Animation_BlueBG_V1_L1R5-9900000000079e3c.gif">
</td>
</tr>
</table>
<table class="buttonsintro" align="center" width="600px" bgcolor="white">
<tr>
<td>
<h1 style="font-family: Roboto,Tahoma,sans-serif; font-size:1.5rem; line-height:30px;padding:0 15px 0 15px;color:#5f5f5f;" align="left">
Inspiring Stuff</h1>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="left">
Here's what got us up in a state of mind surfing this week:</p>
</td>
</tr>
</table>
<table class="buttons" align="center" width="600px" bgcolor="white">
<tr>
<td class="btn" align="center"style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;padding: 12px 18px;
text-decoration: none; text-decoration: none;border-radius: 3px;
border: 1px solid red;">
<strong>💊 SHOULD BUTTONS BE ROUNDED OR SQUARE?</strong></a></span></td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td class="btn" align="center" style="border-radius: 3px;" bgcolor="white">
<span><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red;display: inline-block;">
<strong>⬛ WHAT'S THIS GONNA LOOK LIKE IN DARK MODE?</strong></a></span>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="margin-bottom:25px; border-radius: 3px;" bgcolor="white">
<a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;">
<strong>🏃 THE DESIGN SPRINT CHALLENGE OF NICK BRITO</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com"
target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; display: inline-block;"><strong>🎲 PRESENTING CONFLICTING OPTIONS IN EMAIL</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="white"><a href="https://litmus.com" target="_blank" style="font-size: .8rem; color: black;
text-decoration: none; text-decoration: none;border-radius: 3px;
padding: 12px 18px; border: 1px solid red; max-width:80%; display: inline-block;"><strong>🍭 COLORFUL GRADIENT CARDS</strong></a>
</td>
</tr>
<tr>
<td style="line-height:15px;"> </td>
</tr>
<tr>
<td>
<img alt="bottom border of image" width="600px"
src="http://i4.createsend1.com/ei/i/53/DC3/DE5/174640/csfinal/rounded-bottom_articles-fancy1-9900000000079e3c.png">
</img>
</td>
</tr>
</table>
<table class="cliff1" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td>
<h2 style="padding:0 15px 0 15px; line-height:25px;font-size:1.2rem;" color="#5f5f5f;" align="center">Follow Us off the Cliff</h2>
<p style="padding:0 15px 0 15px; line-height:25px;font-size:1rem;" color="#5f5f5f;" align="center">
We know what your mother said. If Really Good Emails jumped off a cliff would you go with them? Yes, of course you would. Don’t be silly.</p>
</td>
</tr>
</table>
<table class="cliff2" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="#38A1F3">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius:4px; display: inline"><strong>TWITTER</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px;border-radius: 4px;" bgcolor="#C92228">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px; display: inline"><strong>PINTEREST</strong></a></span>
</td>
<td class="space" style="min-width:20px;"> </td>
<td align="center" style="padding: 15px 10px 15px 10px; border-radius: 4px;" bgcolor="black">
<span><a href="#" target="_blank" style="font-size: .8rem; color: white;
text-decoration: none; text-decoration: none;border-radius: 4px;
display: inline"><strong>CODEPEN</strong></a></span>
</td>
<tr>
<td class="space" style="line-height:30px;"> </td>
</tr>
</table>
<table style="padding: 25px 0 25px 0" align="center" width="100%" bgcolor="white">
<tr>
<td align="center">
<h3>Design Better. Spam Never.</h3>
<p>Update Subscription - Articles & Interviews - Free Resources - View Online</p>
</td>
</table>
<table class="footer" align="center" style="width:600px;" bgcolor="#f7f7f7">
<tr>
<td style="color:#9a9ca0; font-size:.7rem; line-height:20px;padding-top:20px;"><p>We sent this email to you because of your insatiable thirst for email inspiration that does not make your eyes burn
like you were thrown into a lake of sliced raw onions—ugh, the worst.</p>
<p style="padding-top:10px;">All this shiznit is © Really Good Emails 2018. All these images belong to us and our moms all said this is
one instance where we don't have to share if we don't want to. All the emails apparently still belong to the
individual companies, we just sort of "web photographed" them when they put them in our email inbox. </p>
<p style="padding-top:10px;">If you want to send us gifts, fan mail, or anything that does not include stalking or us waking up with you in our
living room—you can find us at 1040 W Washington St, Greenville, SC, USA 29601</p>
<p style="padding-top:10px;">Or, if you're just tired of hearing from us, you can unsubscribe too.</p></td>
</tr>
</table>
</body>
</html>html css responsive-design inline
html css responsive-design inline
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
asked Nov 26 '18 at 15:46
Dave WhiteDave White
82
82
Is the other code within your style tag (in the media query) rendering correctly? Anytime I've built an email template, all of my CSS had to be inline. Perhaps the CSS within the style tag isn't processing at all.
– silencedogood
Nov 26 '18 at 15:51
You should never start with desktop. You should start with Mobile then move on to tablet and than code for desktop
– J.vee
Nov 26 '18 at 15:53
add a comment |
Is the other code within your style tag (in the media query) rendering correctly? Anytime I've built an email template, all of my CSS had to be inline. Perhaps the CSS within the style tag isn't processing at all.
– silencedogood
Nov 26 '18 at 15:51
You should never start with desktop. You should start with Mobile then move on to tablet and than code for desktop
– J.vee
Nov 26 '18 at 15:53
Is the other code within your style tag (in the media query) rendering correctly? Anytime I've built an email template, all of my CSS had to be inline. Perhaps the CSS within the style tag isn't processing at all.
– silencedogood
Nov 26 '18 at 15:51
Is the other code within your style tag (in the media query) rendering correctly? Anytime I've built an email template, all of my CSS had to be inline. Perhaps the CSS within the style tag isn't processing at all.
– silencedogood
Nov 26 '18 at 15:51
You should never start with desktop. You should start with Mobile then move on to tablet and than code for desktop
– J.vee
Nov 26 '18 at 15:53
You should never start with desktop. You should start with Mobile then move on to tablet and than code for desktop
– J.vee
Nov 26 '18 at 15:53
add a comment |
1 Answer
1
active
oldest
votes
0
After taking a closer look, I think your problem may be that you have an embedded table within the href link tag, which has a margin applied to the inline CSS:
style="margin-top:25px; margin-left:15px; border-radius:5px;
The margin-left will keep it from filling 100% of the width.
BTW - I agree with the comment by J.vee that you should always develop your CSS with mobile first concept. However, being that you're using a pre-baked template, I'm guessing that this wasn't your choice.
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484662%2fhtml-responsive-email-table-not-adhering-to-max-width100%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
After taking a closer look, I think your problem may be that you have an embedded table within the href link tag, which has a margin applied to the inline CSS:
style="margin-top:25px; margin-left:15px; border-radius:5px;
The margin-left will keep it from filling 100% of the width.
BTW - I agree with the comment by J.vee that you should always develop your CSS with mobile first concept. However, being that you're using a pre-baked template, I'm guessing that this wasn't your choice.
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
add a comment |
0
After taking a closer look, I think your problem may be that you have an embedded table within the href link tag, which has a margin applied to the inline CSS:
style="margin-top:25px; margin-left:15px; border-radius:5px;
The margin-left will keep it from filling 100% of the width.
BTW - I agree with the comment by J.vee that you should always develop your CSS with mobile first concept. However, being that you're using a pre-baked template, I'm guessing that this wasn't your choice.
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
add a comment |
0
0
0
After taking a closer look, I think your problem may be that you have an embedded table within the href link tag, which has a margin applied to the inline CSS:
style="margin-top:25px; margin-left:15px; border-radius:5px;
The margin-left will keep it from filling 100% of the width.
BTW - I agree with the comment by J.vee that you should always develop your CSS with mobile first concept. However, being that you're using a pre-baked template, I'm guessing that this wasn't your choice.
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
After taking a closer look, I think your problem may be that you have an embedded table within the href link tag, which has a margin applied to the inline CSS:
style="margin-top:25px; margin-left:15px; border-radius:5px;
The margin-left will keep it from filling 100% of the width.
BTW - I agree with the comment by J.vee that you should always develop your CSS with mobile first concept. However, being that you're using a pre-baked template, I'm guessing that this wasn't your choice.
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
edited Nov 26 '18 at 16:04
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
answered Nov 26 '18 at 15:59
silencedogoodsilencedogood
857
857
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
add a comment |
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
This worked. I appreciate it. I do still have a problem with this but i can post in the Answer section below.
– Dave White
Nov 29 '18 at 16:43
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
No prob. Would you mind checking this as the solution? Gotta get my score up :)
– silencedogood
Dec 5 '18 at 15:54
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53484662%2fhtml-responsive-email-table-not-adhering-to-max-width100%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Is the other code within your style tag (in the media query) rendering correctly? Anytime I've built an email template, all of my CSS had to be inline. Perhaps the CSS within the style tag isn't processing at all.
– silencedogood
Nov 26 '18 at 15:51
You should never start with desktop. You should start with Mobile then move on to tablet and than code for desktop
– J.vee
Nov 26 '18 at 15:53