Responsive two-column in mobile html - html

Question

I'm trying to set two images in two column in mobile but doesn't work any idea?
Demo here
HTML
<table bgcolor="#ffffff" id="event-info" class="outer-table"
summary="outer-table" valign="top" border="0" cellpadding="0" cellspacing="0" style="background-color:#ffffff; width:100%; max-width:600px; Margin:0 auto" width="100%">
<tr align="center" class="tab1">
<td>
<img src="images/website.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Website</p>
</td>
<td>
<img src="images/mobile.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Mobile</p>
</td>
<td>
<img src="images/marketing.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Marketing</p>
</td>
</tr>
<tr align="center" class="tab2">
<td>
<img src="images/support.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Support</p>
</td>
<td>
<img src="images/management.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Management</p>
</td>
<td>
<img src="images/customer.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
<p class="features" border="0" width="600" style="width:35%;max-width:600px;
font-size: 12px;padding-top: 10px;font-weight: 700;">Customer</p>
</td>
<tr class="spacer-40" height="40" style="height:55px; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important;">
<td> </td>
</tr>
</tr>
</table>
CSS
#media only screen and (max-width: 769px){
table tr td{
display:block;
}
}

Answer 1

Update based on comment
Since you can't switch a table from a 3 column to a 2 column layout (at least not in a proper way) and half of the email clients doesn't support media queries, I came up with this solution.
Test it thoroughly with email clients as I haven't been able to do that
I added min-width: 100px; to the "tabs" divs which will make it break into 1 column when lack of space. Remove it if you don't want that.
<div style="max-width:600px;margin:0 auto;text-align: center;">
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
<div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
<img src="images/website.png" style="border:0;width:30%;">
<p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
</div>
</div>
As that can't be done properly using table, here is a flex solution.
.outer {
max-width:600px;
margin:0 auto;
display: flex;
flex-wrap: wrap;
}
.outer .tab1 {
width: 33%;
text-align: center;
}
.outer img.features {
border:0;
width:30%;
max-width:600px;
}
.outer p.features {
max-width:600px;
font-size: 12px;
padding-top: 10px;
font-weight: 700;
text-align: center;
}
#media only screen and (max-width: 480px){
.outer .tab1 {
width: 50%;
}
}
<div id="event-info" class="outer">
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
</div>
If flex can't be used, use display: inline-block
.outer {
max-width:600px;
margin:0 auto;
}
.outer .tab1 {
display: inline-block;
text-align: center;
width: calc(33% - 4px); /* 4px, see comment below */
}
.outer img.features {
border:0;
width:30%;
max-width:600px;
}
.outer p.features {
max-width:600px;
font-size: 12px;
padding-top: 10px;
font-weight: 700;
text-align: center;
}
#media only screen and (max-width: 480px){
.outer .tab1 {
width: calc(50% - 4px);
}
}
<div id="event-info" class="outer">
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
<div class="tab1">
<img src="images/website.png" class="features">
<p class="features">Website</p>
</div>
</div>
Side note:
The 4px used, is to compensate for the white space (the line break between elements in the markup) and is based on font size, so if it increases this value might need to be adjusted.
An alternative is to change the markup from
</div>
<div class="tab1">
to
</div><div class="tab1">
or
</div><!--
--><div class="tab1">