HG
0
Stacking in gmail
Hey guys, for the longest time - I've been using <td> to stack in mobile. But just recently I discover that my <td> no longer stack and shows side by side specially in Gmail and other mobile clients.
Has anyone experienced this recently?
Here is some of my sample code:
<table class="mb-100" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" bgcolor="#F5F6F7" style="border-collapse: collapse;">
<tr>
<td class="mb-center">
<table class="mb-87" border="0" cellpadding="0" cellspacing="0" align="center" width="81%" style="border-collapse: collapse;" bgcolor="#F5F6F7">
<tr>
<td>
<table class="mb-100" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" bgcolor="#F5F6F7" style="border-collapse: collapse; text-align: center">
<tr>
<!-- Column - 1-->
<td class="mb-100 mb-inline-block" style="vertical-align: middle; width: 16%; max-width: 50">
<img class="mb-25" src="#" style="width: 100%; min-width: 65px" border="0" width="50">
</td>
<!-- Column - 2-->
<td class="mb-100 mb-block" style="vertical-align: top; width: 3%; height: 10px; font-size: 0px; line-height: 0px">
</td>
<!-- Column - 3-->
<td class="mb-80 mb-inline-block" style="vertical-align: middle; width: 48%; min-width: 200px;">
<table style="width: 100%" style="border-collapse: collapse;" border="0" margin="0">
<tr>
<td class="mb-center" style="padding:0; margin:0; color: #525050; line-height: 1.2em; font-size: 17px; text-align: left; font-family: 'Arial', Helvetica, sans-serif; font-weight: bold">
Not what you're looking for?
</td>
</tr>
<tr>
<td height="6" style="font-size: 0px; line-height: 0px;">
</td>
</tr>
<tr>
<td class="mb-center" style="padding:0; margin:0; color: #525050; line-height: 1.2em; font-size: 15px; text-align: left; font-family: 'Arial', Helvetica, sans-serif;">
Take a look at some of our other recommendation.
</td>
</tr>
</table>
</td>
<!-- Column - 4-->
<td class="mb-100 mb-inline-block" border="0" cellpadding="0" cellspacing="0" height="10" style="vertical-align: top; width: 3%; font-size: 0px; line-height: 0px">
</td>
<!-- Column - 5-->
<td class="mb-100 mb-inline-block" align="right" style="padding:0;margin:0;">
<div class="mb-center" style="text-align: center;">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href=""
style="height:46px;v-text-anchor:middle;width:144px" arcsize="7%" strokecolor="#002356"
fillcolor="#002356"><w:anchorlock/><center style="color:#FFFFFF;font-family: 'Arial', Helvetica, sans-serif; font-size:15;font-weight:bold;">See more cards</center></v:roundrect><![endif]-->
<a class="mb-65" href="#" class="mb-text-cta"
style="background-color:#002356; color: #FFFFFF; border-radius: 4px;display:inline-block;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:43px;text-align:center;text-decoration:none;width:142px; min-width: 142px; -webkit-text-size-adjust:none;mso-hide:all;font-weight:bold;">
See more cards
</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Besides this, there are some media queries with classes that are mentioned in the code.
Hi, change your TD to stack on mobile with TH.
Hi Hyde,
The best solution is to create a grid which doesn't rely on CSS for stacking TD or TH.
If CSS isn't supported, then media queries won't be supported either.
I created this grid system a year ago. This uses DIVs (and tables for MSO and IE) which automatically stack depending on browser width:
https://litmus.com/builder/b8b7148
Try using this.
Thanks,
Lee.