0

I'm working on a responsive email template, and I really would like a table layout for featured products, 3x2 on desktop, 2x3 on mobile.

Currently, I am using a table with cells that change to display as inline-block for mobile clients. However, this breaks in Outlook and Thunderbird, as they display all cells in a single row. I have tried floating the elements, but again they break.

Table Grid 3x2 to 2x3

CSS

     @media screen and (max-width: 600px) {
        .stack2 {
          width: 50% !important;
        }
      }

      .stack2 {
        display: inline-block;
        box-sizing: border-box;
      }

HTML


<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
  <tr>
    <!-- Product #1 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #2 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #3 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #4 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #5 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
    <!-- Product #6 -->
    <td class="stack2" width="33.33%" style="padding:20px;">

    </td>
  </tr>
</table>
wheel58m
  • 112
  • 2
  • 15

1 Answers1

0

Don't use table cells for this. Cells will continue to stack side by side in a row and that is their natural and intended behaviour.
The only way for a table cell to appear underneath others, would be in another row.
Your implementation goes against HTML logic.

I would go with tables for this instead. That way they will easily stack and rearrange depending on the width you give them. Just bear in mind that you will need to use ghost tables to make the tables sit side by side in Outlook.

Here is a loose example (Ghost tables included) for you to adapt to work for you:

<table border="0" cellspacing="0" cellpadding="0" class="FullWidthOnMobile" style="width:600px;">
<tr>
    <td>
        <!--[if (gte mso 9)|(IE)]>
        <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        <tr>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td>
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        <td style="width:200px;">
        <![endif]-->
        <table align="left" border="0" cellspacing="0" cellpadding="0" class="HalfWidthOnMobile" style="width:200px;">
            <tr>
                <td bgcolor="red" style="padding:10px 0; border:1px solid #fff;">&nbsp;</td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

Media queries I used. Again adapt these as I named for simplicity of understanding what I'm doing:

@media only screen and (max-width:600px){
    .FullWidthOnMobile{width:100%!important;min-width:100%!important;}
    .HalfWidthOnMobile{width:50%!important;min-width:50%!important;}
}