CODEWITHSUNDEEP
htmlhtml-tablehtml-email
Mikhail Abramov
Mikhail Abramov

Reputation: 13

Stacking Tables for a responsive HTML email

New to this email stuff, but I've searched and searched for days, and still cannot crack this one. I want the two images to stack when shrinking the window and the BG to turn orange as I have it below. I have a feeling it's something in the way I have the tables are nested.

<!DOCTYPE html>
<html lang="en">
<body>
    <head>
        <style type="text/css">
            @media screen and (max-width: 400px) {
                .content {
                    background-color: #DF6618;
                    width: 100% !important;
                    height: auto !important;
                }

                .contentSmall {
                    width: 100%;
                    height: auto;
                }
            }
        </style>
    </head>

        <table width="600px" class="content">
             <tr>
                 <td>
                     <table width="300px" class="contentSmall">
                         <tr>
                             <img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/>
                         </tr>
                     </table>
                 </td>

                 <td>
                     <table width="300px" class="contentSmall">
                         <tr>
                             <img src="http://2.bp.blogspot.com/_FkAI_ee_eBA/SASnSymg3fI/AAAAAAAAAIA/E6UODcxSoTY/s400/300px-Helix_nebula.jpg"; width="300"; border="1px";/>
                         </tr>
                     </table>
                 </td>
            </tr>
        </table>   
    </body>
</html>

Upvotes: 1

Views: 854

Answers (1)

Dylan Moore
Dylan Moore

Reputation: 550

Change the table elements display properties to block, like so:

        @media screen and (max-width: 400px) {
            .content {
                background-color: #DF6618;
                width: 100% !important;
                height: auto !important;
            }
            table, tbody, tr, th, td {
                display: block
            }
            .contentSmall {
                width: 100%;
                height: auto;
            }
        }

You could also try taking a look at Zurb Ink for a responsive email framework. Here's some templates you could try modifying too.

Upvotes: 1

Related Questions