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.