Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Diana Moura
8,629 PointsCode problem -HTML EMAIL design (going mobile)
Hi again! :)
I am trying to adapt the HTML email to mobile friendly. I have inserted the media queries and checked the id vs class for the td's and tables but it is still not working. Is there anyone out there who could tell me what I'm doing wrong?
Thank you in advance! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title> SQUARE GALLERY | Newsletter </title>
<style type="text/css">
/*///RESET STYLES ////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table {border-collapse: collapse;} /*prevents weird spacing in dif email browsers*/
img, a img {border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
/*CLIENT SPECIFIC STYLES*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /*force outlook hotmail to display full width*/
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;} /*force them to display line height*/
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /*Remove spacing between tables from outlook 2007 and up*/
#outlook a{padding:0;} /*// FORCE OUTLOOK TO OPEN IN BROWSER //*/
img{-ms-interpolation-mode: bicubic;} /*// forces IE to render resized img//*/
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /*//preventswindows and mobile webkit platforms from changing text size /*/
/*////// GENERAL STYLES //////*/
h1, h2, h3{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h1 a{color:#D83826; font-size:44px; font-weight:100; line-height:115%; text-align:left;}
h2, h2 a{color:#606060; font-size:34px; font-weight:100; line-height:100%; text-align:left;}
h3, h3 a{color:#D83826; font-size:30px; font-weight:100; line-height:115%; text-align:left;}
.introductionHeading, .introductionContent, .callToActionContent, .callToActionButtonContent, .eventBlockMonth, .eventBlockDay, .eventContent, .merchandiseContent, .merchandiseButtonContent, .footerContent{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
body, #bodyTable{background-color:#424145;}
#emailContainer{width:100%;}
#heroImageContainer{background-color:#F0F0F0;}
#introductionContainer{background-color:#F0F0F0; padding:40px;}
#introductionBlock{background-color:#F0F0F0;}
.introductionHeading{color:#808080; font-size:14px; font-weight:bold; line-height:150%; padding-left:40px;}
.introductionContent{color:#606060; font-size:18px; line-height:150%; padding-top:40px;}
#callToActionContainer{background-color:#D83826; padding:40px;}
#callToActionBlock{background-color:#D83826;}
.callToActionContent h3{color:#FFFFFF; text-align:center;}
.callToActionContent{color:#FFFFFF; font-size:16px; line-height:150%; padding-bottom:40px; text-align:center;}
.callToActionButton{background-color:#F0F0F0; border-radius:4px; box-shadow:0 5px 0 #A22A1C;}
.callToActionButtonContent{padding-top:20px; padding-right:40px; padding-bottom:20px; padding-left:40px;}
.callToActionButtonContent, .callToActionButtonContent a{color:#D83826; display:block; font-size:24px; font-weight:bold; line-height:100%; letter-spacing:-1px; text-align:center; text-decoration:none;}
#eventContainer{background-color:#F0F0F0; padding:40px;}
#eventBlock{background-color:#F0F0F0; border-top:1px solid #BBBBBB; border-bottom:1px solid #BBBBBB;}
#eventBlockCell{padding:40px;}
.eventBlockCalendar{background-color:#FFFFFF; border:1px solid #DDDDDD;}
.eventBlockHeading{padding-bottom:40px;}
.eventBlockMonth{background-color:#D83826; color:#FFFFFF; font-size:18px; font-weight:bold; line-height:100%; padding:10px;}
.eventBlockDay{background-color:#FFFFFF; color:#404040; font-size:48px; font-weight:bold; line-height:100%; padding:15px;}
.eventContent{color:#606060; font-size:16px; line-height:125%; padding-left:20px;}
#merchandiseContainer{background-color:#F0F0F0; padding:40px;}
#merchandiseBlock{background-color:#FFFFFF; border:1px solid #BBBBBB; border-collapse:separate; border-radius:4px;}
#merchandiseBlockCell{padding:40px;}
.merchandiseBlockHeading{padding-bottom:40px;}
.merchandiseBlockLeftColumn{padding-right:10px;}
.merchandiseBlockRightColumn{padding-left:10px;}
.merchandiseImage{border:1px solid #DDDDDD;}
.merchandiseContent{color:#606060; font-size:16px; line-height:110%; padding-left:10px;}
.merchandiseButton{background-color:#D83826; border-radius:4px; box-shadow:0 5px 0 #A22A1C}
.merchandiseButtonContent, .merchandiseButtonContent a{ color:#F0F0F0; font-size:16px; font-weight:bold; line-height:100%; letter-spacing:-1px; padding:10px; text-align:center; text-decoration:none;}
#footerContainer{padding:40px;}
.footerContent{color:#AAAAAA; font-size:13px; line-height:150%; padding-bottom:40px;}
.footerContent a{color:#D83826; text-decoration:none;}
/*///// MOBILE STYLES /////*/
@media only screen and (max-width: 480px){
/*////// RESET STYLES //////*/
td[id="introductionContainer"], td[id="callToActionContainer"], td[id="eventContainer"], td[id="merchandiseContainer"], td[id="footerContainer"]{padding-right:10px !important; padding-left:10px !important;}
table[id="introductionBlock"], table[id="callToActionBlock"], table[id="eventBlock"], table[id="merchandiseBlock"], table[id="footerBlock"]{max-width:480px !important; width:100% !important;}
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/*////// GENERAL STYLES //////*/
h1{font-size:34px !important;}
h2{font-size:30px !important;}
h3{font-size:24px !important;}
img[id="heroImage"]{height:auto !important; max-width:520px !important; width:100% !important;}
td[class="introductionLogo"], td[class="introductionHeading"]{display:block !important;}
td[class="introductionHeading"]{padding:40px 0 0 0 !important;}
td[class="introductionContent"]{padding-top:20px !important;}
td[class="callToActionContent"]{text-align:left !important;}
table[class="callToActionButton"]{width:100% !important;}
td[id="eventBlockCell"]{padding-right:20px !important; padding-left:20px !important;}
table[class="eventBlockCalendar"]{width:100px !important;}
td[id="merchandiseBlockCell"]{padding-right:20px !important; padding-left:20px !important;}
td[class="merchandiseBlockHeading"] h2{text-align:center !important;}
td[class="merchandiseBlockLeftColumn"], td[class="merchandiseBlockRightColumn"]{display:block !important; padding:0 0 20px 0 !important; width:100% !important;}
td[class="footerContent"]{font-size:15px !important;}
td[class="footerContent"] a{display:block;}
}
</style>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<table border="0" cellpadding="0" cellspacing="0" width="520" id="emailContainer">
<tr>
<td align="center" valign="top" id="heroImageContainer">
<img src="img/in_the_conservatory.jpg" alt="In the conservatory, by Monet"width="520" heith="415" id="heroimage" />
</td>
</tr>
<tr>
<td align="center" valign="top" id="introductionContainer">
<table border="0" cellpadding="0" cellspacing="0" width="520" id="introductionBlock">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="introductionLogo">
<a href="#" target="blank" title="Square gallery">
<img src="img/logo.png" alt="Square gallery" width="150" height="165" /> </a>
</td>
<td align="left" valign="middle" class="introductionHeading">
presents <br/>
<h1> The work of Edóuard Monet</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="introductionContent">
Starting on October 12th and running for three weeks, square gallery is proud and excited to display a selection of 6 pieces of the work of Édouard Manet, the French master painter of the great Impressionist and Realist movements of the 17th century.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="callToActionContainer">
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock">
<tr>
<td align="center" valign="top" class="callToActionContent">
<h3> The Works of Édouard Manet:
A Live Tour With Clémence Rousseau</h3>
<br/>
Friday nights at 8:00PM throughout the exhibition, French art critic and Manet expert Clémence Rousseau will be examining the 6 pieces featured, providing deep insights into Manet’s genius and his beautiful artwork. Register early, as space is limited.
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionButton">
<tr>
<td align="center" valign="top" class="callToActionButtonContent">
<a href="#" target="blank" title="Square gallery">
Register Now </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="eventContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="eventBlock">
<tr>
<td align="center" valign="top" id="eventBlockCell">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" class="eventBlockHeading">
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="110" class="eventBlockCalendar">
<tr>
<td align="center" valign="top" class="eventBlockMonth">
NOV
</td>
</tr>
<tr>
<td align="center" valign="top" class="eventBlockDay">
7
</td>
</tr>
</table>
</td>
<td align="left" valign="top" class="eventContent">
<h3>localArTLanta</h3>
<strong>Running November 7 through December 14 </strong>
<br />
An exhibition of Atlanta’s finest local artists in a broad selection of media ranging from painting to sculpture to perfomance art.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="merchandiseContainer">
<table border="0" cellpadding="0" cellspacing="0" width="520" class="merchandiseBlock">
<tr>
<td align="center" valign="top" class="merchandiseBlockCell">
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="left" valign="top" class="merchandiseBlockHeading">
<h2>Support square gallery</h2>
</td>
</tr>
<tr>
<td align="center" valign="top" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="center" valign="top" width="50%" class="merchandiseBlockLeftColumn" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="center" valign="top" >
<img src="img/berthe_morisot.png" height="150" width="110" clas="merchandiseImage"/>
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" >
Art Print:
<br />
<strong> Berthe Morisot With A Bouquet Of Violets </strong>
<br />
11”x7” - $29.99
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" >
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" >
<a href="#" target="_blank" title="">Purchase</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="merchandiseBlockRightColumn" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td align="center" valign="top" >
<img src="img/logo_tshirt.png" height="150" width="110" clas="merchandiseImage"/>
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent" >
T-Shirt:
<br />
<strong>square gallery Logo Tee </strong>
<br />
8 Sizes - $19.99
<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="merchandiseButton" >
<tr>
<td align="center" valign="middle" class="merchandiseButtonContent" >
<a href="#" target="_blank" title="">Purchase</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="footerBlock" >
<tr>
<td align="center" valign="top" class="footerContent" >
<strong> As always, everyone at square gallery thanks you
<br />
for your support. We couldn’t exist without you.
</strong>
</td>
</tr>
<tr>
<td align="center" valign="top" class="footerContent">
© 2013 square gallery. • 1551 Peachtree Street NW • Atlanta, Georgia 30318
<br />
<br />
<br />
<a href="#" target="_blank">Unsubscribe from list</a>
<a href="#" target="_blank">Set e-mail preferences</a>
<a href="#" target="_blank">View in browser</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
1 Answer
Benjamin Palladino
13,297 PointsJust validated your code at validator.w3.org and you have some errors. Fix these and then see if it helped some of your issue. :)