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

HTML

Posted by Paula Mourad
Paula Mourad
5,154 Points

Responsive Email - Million Dollar Question

Hello TeamTreePeople!

At work I have been assigned to create responsive emails. I need to create emails so they can be seen in any device, browser, etc.

I managed to design an email entirely using tables (yeay!). On the internet I found a little piece of coding that makes my email "half" responsive, it only works in my excercise. I really need to make it FULL responsive. Here is my code with my Inline CSS. I know it looks like a lot, but it isn't that bad. Hope you can help me! :) Thanks in adcance!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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, minimum-scale=1, maximum-scale=1" />
  <title>¡Yapo te hizo un regalo!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<!-- STYLE CSS HERE -->
<style>
@media all and (max-width:768px){

    table,tr, td, tbody, td p table div, table table{
        width:100%!important;
        float:left;
        clear:both;
        display:block;
        text-align:center;
    }
    table img {
        max-width:100% !important;
        height:auto;
    }
}
</style>
<!-- END OF STYLE -->

<body style="padding: 0 0 0 0; margin: 0 0 0 0;">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
          <td>
                <table border="0" cellspacing="0" cellspadding="0" align="center" width="600" style="border-collapse: collapse;">
                    <tr>
                        <td align="left" border="0" bgcolor="#ffffff" style="padding: 10px 0 10px 0;">
                            <h4> ¡Yapo te hizo un regalo! </h4>
                        </td>
                        <td align="right" border="0" bgcolor="#ffffff" style="padding: 10px 0 10px 0;">
                            <img src="images/logo.png" alt="Logo Yapo" width="204" height="60" style="display: block;" align="center" />
                        </td>
                    </tr>
                </table>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="95b4d8">
                        <tr>
                            <td align="center" width="100%" style="line-height: none; color: #ffffff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 32px; padding: 20px 0 20px 0;">
                                 Juan Elías <br />
                                ¡Yapo te hizo un regalo!
                            </td>
                        </tr>
                        <tr>
                            <td align="center" style="padding: 20px 0 10px 0; font-size: 16px; color: #ffffff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                                Queremos que vendas rápido y por eso con <b> Subir Ahora </b> dejamos tu aviso <br /> nuevamente en las primeras posiciones del listado
                            </td>
                        </tr>
                        <tr>
                            <td align="center" style="padding: 10px 0 20px 0;">
                                <img src="images/gift.png" alt="Regalo" width="466" height="466" style="display-block: block;" align="center">
                            </td>
                            <tr>
                                <td align="center" style="padding: 10px 0 0 0;">
                                    <img src="images/stars.png" alt="Estrellas" width="203" height="18" style="display-block: block;" align="center">
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-size: 16px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ffffff; padding: 20px 0 30px 0;">
                                    Puedes usar este y otros productos yapo.cl para <br />
                                    <b> destacar tus avisos </b> y así vender más rápido.
                                </td>
                            </tr>
                    </table>
                    <table border="0" cellspacing="0" cellpadding="0" width="100%" style="padding: 20px 0 20px 0;" align="center">
                        <tr align="center">
                            <td align="center"> <img src="images/info.png" alt="info" align="center" style="padding: 0 5px 0 0;">¿Tienes alguna duda? Hablemos
                            </td>
                        </tr>
                    </table>
                </table>
            </table>
        <td>
    </table>
</body>
</html>

1 Answer

Philip G
Philip G
14,601 Points
Philip G
Philip G
14,601 Points

Hi Paula,

I know, HTML Emails are troublesome. Check out this link: http://zurb.com/ink/ This is a responsive E-Mail framework. Why do you think your mail is only half-responsove? Maybe you want to paste in some more media queries?

Kindly Regards,

Philip