CODEWITHSUNDEEP
htmlresponsive-designhtml-email
Derock
Derock

Reputation: 31

Responsive email HTML without media queries

Gmail don't support media queries CSS rule so I had create HTML email with inline css and now I'm stuck in desktop view. I cannot use float:left either as hotmail will remove it from email body and neither use media queries.

My requirement is attached in the screenshot

My Current code is

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;">
<tr>
    <td>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td valign=top width="70%" style="min-width: 320px; display: inline-block; background-color: yellow;height:auto; height:200px;">
                    Main Content
                </td>
                <td valign=top width="29%" style="min-width: 150px; max-width:320px; display: inline-block; ">
                    <!-- SIDE BAR CONTENT -->
                    <table align=left cellspacing="0" cellpadding="0" border="0" style="background-color: blue; width: 100px;">
                        <tr>
                            <td width="*" style="max-width: 110px; background-color: red;  height:100px;">
                                MY PHOTO
                            </td>
                        </tr>
                    </table>
                    <table align=left width="*" cellspacing="0" cellpadding="0" border="0" style="background-color: green; width: 220px;">
                        <tr>
                            <td width="*" style="max-width: 110px; background-color: green;  height:100px;">
                                MY STATS TEXT
                            </td>
                        </tr>
                    </table>
                    <!-- SIDE BAR CONTENT END -->
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

Upvotes: 2

Views: 1773

Answers (1)

Ryan
Ryan

Reputation: 416

You can try to enclose each of the two 'floats' in inline block div's, but it is not possible to have two stacking blocks in a desktop view to have them next to each other in a mobile view without media queries.

The best solution is to use media queries and have a fallback layout for Gmail (such as using inline block div's).

Demo using inline block div's:

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;">
<tr>
    <td>
        <div style="width: 380px; display: inline-block;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign=top width="70%" style="min-width: 320px; display: inline-block; background-color: yellow;height:auto; height:200px;">
                        Main Content
                    </td>
                </tr>
            </table>
        </div>
        <div style="width: 220px; display: inline-block;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign=top width="29%" style="min-width: 150px; max-width:320px; display: inline-block; ">
                        <!-- SIDE BAR CONTENT -->
                        <table align=left cellspacing="0" cellpadding="0" border="0" style="background-color: blue; width: 100px;">
                            <tr>
                                <td width="*" style="max-width: 110px; background-color: red;  height:100px;">
                                    MY PHOTO
                                </td>
                            </tr>
                        </table>
                        <table align=left width="*" cellspacing="0" cellpadding="0" border="0" style="background-color: green; width: 220px;">
                            <tr>
                                <td width="*" style="max-width: 110px; background-color: green;  height:100px;">
                                    MY STATS TEXT
                                </td>
                            </tr>
                        </table>
                        <!-- SIDE BAR CONTENT END -->
                    </td>
                </tr>
            </table>
    </td>
</tr>
</table>

More info on designing responsive email HTML: https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/

Upvotes: 2

Related Questions