How to make a table stack on mobile? - html

Question

Working on a newsletter template, and I'm trying to get a table of three ads (and a gap in between) to display one beneath the other on mobile, while displaying as a row on desktop (which is behaving as expected right now).
I've looked at Media Queries and classes to see what I can do including display: block and so forth, but haven't come up with anything that works in testing.
Here's the table that is housing these images:
<!-- begin snippet: js hide: false console: true babel: false -->
<table idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};"
bgcolor="${freeTextBackgroundColor}" valign="top">
<center>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"
align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer};"
height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Lato', Arial, sans-serif;font-size: 14px;line-height: 23px;color: #666666;border-collapse: collapse;">
<div>
<table>
<tbody>
<tr>
<td align="center" valign="top" width="300" style="width: 300px;"> <img src="<IMG SRC FOR BLOCK 1>" /> </td>
<td align="center" valign="top" width="50" style="width: 50px;"></td>
<td align="center" valign="top" width="300" style="width: 300px;"> <img src="<IMG SRC FOR BLOCK 1>" /> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};"
height="${freeTextSpacer2}"> </td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Desktop View (Works):
Mobile View (Problem):
I need to keep the Desktop as is, but make the two blocks on mobile appear one underneath the other.

Answer 1

/* Prevent WebKit and Windows mobile changing default text sizes */
body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
/* RESET STYLES */
img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
table{border-collapse: collapse !important;}
body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
table, td { border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt !important;}
/* remove the download icon from gmail*/
img + div { display:none; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
#media only screen and (max-width: 525px) {
/* ALLOWS FOR FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/* FULL-WIDTH TABLES */
.responsive-table {
width: 100% !important;
}
/* ADJUST BUTTONS ON MOBILE */
.mobile-button-container {
margin: 0 auto;
width: 100% !important;
}
/* FULL WIDTH IMAGE */
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
/* EVENT SECTION BUTTON */
.button-padding {
padding-left: 30px;
padding-right: 30px;
}
.mobile-center {
text-align: center !important;
}
.remove-float {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}
.normal-padding {
padding-top: 20px !important;
}
table[class="body"] .content--wrapper {
padding-left: 20px !important;
padding-right: 20px !important;
}
table[class="body"] .responsive-table {
float: none !important;
width: 100% !important;
clear: both;
}
.center-responsive{
text-align: -webkit-center;
}
}
#media screen and (max-width: 599px) {
.container {
width: 100%!important;
}
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
.mobile-center {
width: 100% !important;
text-align: center !important;
}
.remove-float {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}
.col-2 {
max-width: 100% !important;
width: 100% !important;
}
.col-3 {
max-width: 100% !important;
width: 100% !important;
}
.pi-col-wrapper {
display: block;
width: 100%!important;
}
.pi-col {
width: 100%;
}
.center-responsive{
text-align: -webkit-center;
}
}
#media screen and (min-width: 600px) {
.container {
width: 600px!important;
margin: 0 auto!important;
}
.mobile-center {
width: 100% !important;
}
.col-2 {
display: inline-block !important;
width: 262px !important;
}
.col-3 {
display: inline-block !important;
width: 185px !important;
}
.fluid-wrapper {
width: 540px !important;
}
.pi-col-wrapper {
display: inline-block;
width: 50%!important;
}
.pi-col {
width: 255px !important;
}
.center-responsive{
text-align: -webkit-right;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Janssen</title>
<!--[if gte mso 9]>
<style>
sup { font-size: 100% !important; }
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: #f4f4f4; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f4f4f4" style="width:100% !important;">
<tbody>
<tr>
<td align="center" valign="top">
<table class="container" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
<tbody>
<!-- ========== INTRO TEXT WITH SIGNATURE STARTS ========== -->
<tr>
<td class="content--wrapper" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding: 15px 30px 37px; text-align: left; vertical-align: top;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%; width: 100% !important;">
<tbody>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 0;" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="540" style="padding: 0;" class="responsive-table">
<tbody>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="padding-bottom: 20px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="center" valign="top" width="540">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:540;">
<tbody>
<tr>
<td align="left" valign="top" style="font-size:0;" bgcolor="#f7f7f7">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
<tr>
<td align="left" valign="top" width="268">
<![endif]-->
<div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="168" class="wrapper">
<tbody>
<tr>
<td valign="top">
<img src="https://dummyimage.com/262x170/000/fff.png" alt="alt text here" width="262" height="170" border="0" style="display: block; font-family: Arial; color: #266e9c; font-size: 14px;" class="wrapper">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td align="left" valign="top" width="268">
<![endif]-->
<div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
<table align="left" bgcolor="#f7f7f7" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 268px; float: right;" class="wrapper">
<tbody>
<tr>
<td style="padding: 15px;padding-top: 27px" class="no-padding">
<!-- ARTICLE -->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" style="font-size: 13px; line-height: 20px; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; text-decoration: none;" class="padding-copy">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</td>
</tr>
<tr>
<td align="left" style="font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: normal; line-height: 20px; padding-bottom: 9px;padding-top: 16px;" class="">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="border-radius: 5px; padding:9px 14px 9px 14px;" bgcolor="#002060">
READ MORE >
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- ========== LEFT RIGHT TWO COLUMN WITH THUMBNAIL ENDS ========== -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have tested on outlook and also checked the orientation issue on iPhone. It's working perfectly on devices. Just put the contents and adjust accordingly. Hope it'll help