Stack Email for Gmail on mobile

Question

My media queries are not being recognized by Gmail for mobile.

Does anybody how can this be fixed? I'd like my cells to stack, it all works fine on Mail iOS, Outlook iOS, but not Gmail ...

Thanks for your advice!

Answer 1

Gmail doesn't support media queries (or the <style> tag), so in order to have table cells stack on narrow widths you have to code a hybrid email.

These patterns by Fabio Carniero demonstrate this principle in action. I would strongly recommend looking at these scaffolds, as they achieve column stacking in mobile Gmail as well as other email clients that don't support media queries.

Here is an example of a 2-column layout that stacks without using media queries (adapted from Fabio's files):

<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
    <td align="center" height="100%" valign="top" width="100%">
        <!--[if mso]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
        <tr>
        <td align="center" valign="top" width="660">
        <![endif]-->
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
            <tr>
                <td align="center" valign="top" style="font-size:0;">
                    <!--[if mso]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
                    <tr>
                    <td align="left" valign="top" width="330">
                    <![endif]-->
                    <div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
                            <tr>
                                <td align="center" valign="top">
                                    LEFT
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    <td align="left" valign="top" width="330">
                    <![endif]-->
                    <div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
                            <tr>
                                <td align="center" valign="top">
                                    RIGHT
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->