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
Mojca Tusek
Courses Plus Student 246 Pointswhy my email is not responsive??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>Treehouse Newsletter</title>
<style type="text/css"> ////// RESET STYLES////// body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding0; width:100% !important;} table{border-collapse:collapse;} 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 Hotmail/Outlook.com to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td,
.ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /*Remove spacing between tables in Outlook 2007 and up */
#outlook a{padding:0;} /* Forse Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
/* prevent Windows and Webkit based mobile platforms from changing declared text sizes. */
/*///// 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;}
.itroductionHeading{color:#808080; font-size:14px; font-weight:bold; line-height:150%; padding-left:40px;}
.introductionContent{color:#606060; font-size:18px; font-weight: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;}
.eventBlockCalander{background-color:#FFFFFF; border-top: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{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;}
.mechandiseBlockHeading{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="alpsImage"]{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"]{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"> <!--//BEGIN EMAIL --> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="emailContainer"> <tr> <td align="center" valign="top" id="heroImageContainer"> <!--//HERO IMAGE BLOCK HERE --> <img src="profusion/alps-big.png" alt="Alps" height="300" width="520" id="alpsImage" /> </td> </tr> <tr> <td align="center" valign="top" id="introductionContainer"> <!--//BEGIN INTRODUCTION BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="introductionBlock">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="introductionLogo">
<a href="#" target="_blank" title="suare image"><img src="profusion/alps2.png" alt="Square Alps" height="165" width="150" /></a>
</td>
<td align="left" valign="middle" class="itroductionHeading">
presents
<br />
<h1>The Julian Alps :)</h1>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="introductionContent">
What we eat is intricately linked to how we feel, both physically and emotionally. Kate’s individual packages are designed especially to help you kick start a new way of eating, whether for performance gains or optimising general health. Whatever your peformance goals, Kate will work with you to develop easy to follow research backed nutrition plans that work.
</td>
</tr>
</table>
<!--//END INTRODUCTION BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="callToActionContainer">
<!--//BEGIN CALL TO ACTION BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="520" id="callToActionBlock">
<tr>
<td align="center" valign="top" class="callToActionContent">
<h3>The Beautiful Alps:<br />A Live Tour With Fany Tusek</h3>
<br />
What we eat is intricately linked to how we feel, both physically and emotionally. Kate’s individual packages are designed especially to help you kick start a new way of eating, whether for performance gains or optimising general health. Whatever your peformance goals, Kate will work with you to develop easy to follow research backed nutrition plans that work.
</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 galery">Register Now</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--//END CALL TO ACTION BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="eventContainer">
<!--// BEGIN EVENT BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="eventBlock">
<tr>
<td align="center" valign="top" id="eventBlockCell">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="eventBlockHeading">
</td>
</tr>
<tr>
<td align="left" valign="top" class="mechandiseBlockHeading">
<h2>Event Calendar</h2>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<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 />
What we eat is intricately linked to how we feel, both physically and emotionally. What we eat is intricately linked to how we feel, both physically and emotionally.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--// END EVENT BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="merchandiseContainer">
<!--//BEGIN MERCHANDISE BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="merchandiseBlock">
<tr>
<td align="center" valign="top" id="merchandiseBlockCell">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" class="mechandiseBlockHeading">
<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="profusion/alpsA.png" height="150" width="110" class="merchandiseImage" />
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent">
Art Print:
<br />
<strong>Bethe moiuas With a buge 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="profusion/alpsB.png" height="150" width="110" class="merchandiseImage" />
</td>
<td align="left" valign="top" width="100%" class="merchandiseContent">
T Shirt:
<br />
<strong> Square galery Logo Tree with petals</strong>
<br />
8 Sizes - $19.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>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--//END MERCHANDISE BLOCK -->
</td>
</tr>
<tr>
<td align="center" valign="top" id="footerContainer">
<!--//BEGIN FOOTER BLOCK -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="footerBlock">
<tr>
<td align="center" valign="top" class="footerContent">
<strong>As allways, everyone at square gallery thanks you
<br />
for your support. We couldnt exist without you.</strong>
</td>
</tr>
<tr>
<td align="center" valign="top" class="footerContent">
© 2016 suare galery • 1551 perrt street nw • Atlanta , giorgiia 30318
<br />
<br />
<a href="#" target="_blank">unsubscribe from list</a> <a href="#" target="_blank">
set email preferences</a> <a href="#" target="_blank">view in browser</a>
</td>
</tr>
</table>
<!--//END FOOTER BLOCK -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body> </html>
1 Answer
Jennifer Nordell
Treehouse TeacherWell this is a tough one. First, I've look at your code a bit( and there's a lot) but I can't find a single "mailto:" anywhere in there. Secondly, you really need to check your spelling for the site's sake. You've misspelled "Georgia" and "gallery". And "buge" is not a recognized English word in either the Webster or Oxford English dictionaries. Maybe someone else can find the mailto: but I don't see it.