outlook responsive-design media-queries html-email email-client

HTML Email Not Stacking in Outlook for iOS

I consider myself a beginner at email coding

I am trying to get my email to stack on mobile in Outlook for iOS using CSS and @media queries. I've had success in other email clients but cannot figure out why it won't work in Outlook for iOS.

This is what I've already tried after reading through multiple bug reports and solutions on various websites:

Changing the stacking <td> to <th>, didn't work
Using only one @media query max-width size, didn't work
Checked formatting of @media query to add appropriate spaces, didn't work
Made sure the closing } } was separated by a space or line break between the two brackets, didn't work

Can anyone think of something else to try? The CSS classes that I use regularly are container, photo, drop. The drop class is what I'm trying to get to work here, as it works in other email clients fine. Thank you in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
    ReadMsgBody{ width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0 !important;
    padding: 0 !important;
} 
    p { margin: 1em 0; }
    table td {
    border-collapse: collapse;
    color: #4D4E50;
}
    img { outline:0; }
    a img { border:none; }
    p { margin: 1em 0; }
    @-ms-viewport { width: device-width; }
    @media only screen and (max-width: 700px) {
    body .container { width:100% !important; }
    body .footer { width:auto !important; margin-left:0; }
    body .mobile-hidden, body .sideblock-hidden { display:none !important; }
    body .logo { display:block !important; padding:0 !important; }
    body .photo img { width:100% !important; height:auto !important; }
    body .drop { display:block !important; width: 100% !important; }
    body .nav4, body .nav5, body .nav6 { display: none !important; }
    body .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both; }
    }
        </style>
<title>ENR InfoCenter</title>
</head>

<body bgcolor="#ffffff" text="#000000" style="color: #000000; margin: 0px; padding:0px; -webkit-text-size-adjust:none;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec">
<tr><td style="font-size: 11px; font-family: 'Helvetica', 'Arial', sans-serif; color:#000000;"><p align="center"><a href="@{mv_online_version}@" target="_blank" style="color:#d92027">View this email in your web browser</a></p></td></tr>
<tr><td>
<table width="650" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="container">
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">


<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td class="photo"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/header.jpg" width="620" height="150" alt="ENR InfoCenter"/></td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr></table>



</td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td>

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="font-size: 20px; line-height:24px; font-family: 'Georgia', 'Times New Roman', 'Times', serif; color:#393939;"><em>Technology Use in Construction</em></td></tr>
<tr><td><hr size="1" color="#cccccc" /></td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="180" class="drop" valign="top"><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" target="_blank"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/1.jpg" width="180" height="180" alt="Photo of construction workers take a break"/></a></td>
<td width="15" class="drop"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td>
<td class="drop" valign="top" style="font-size: 14px; line-height:20px; font-family: 'Helvetica', 'Arial', sans-serif; color:#545454;">
<span style="font-size: 22px; line-height:26px; font-family: 'Helvetica', 'Arial', sans-serif; color:#336899;"><strong>The Benefits of the Construction Equipment Rental Model</strong></span><br />
<em><strong>Construction companies are saving time and money by renting equipment, like forklifts and site cameras, more often.</strong></em><br /><br />

In 2022, <a href="https://www.statista.com/statistics/1224817/reasons-contractors-rented-construction-equipment-us/" target="_blank" style="color:#d92027">62%</a> of contractors rented construction equipment because it provided more flexibility than owning. Specifically, contractors liked that they could return the equipment whenever they wanted with less overhead.<br /><br />

While buying construction equipment can sometimes be more practical than renting, it's not always the best option. In fact, industry experts say that if contractors use a piece of equipment <a href="https://www.constructionbusinessowner.com/equipment/deciding-whether-buy-construction-equipment-or-rent#:~:text=In%20the%20construction%20industry%2C%20a,purchasing%20or%20leasing%20the%20equipment." target="_blank" style="color:#d92027">less than 40% of the time</a>, it's smarter to rent it.<br /><br />

<strong><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" target="_blank" style="color:#d92027">Continue Reading &rarr;</a></strong>
</td></tr>
</table>
</td></tr>

</table>
</td></tr>
</table>


</td></tr>
</table>
</td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>



<style type="text/css">
    ReadMsgBody{ width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0 !important;
    padding: 0 !important;
} 
    p { margin: 1em 0; }
    table td {
    border-collapse: collapse;
    color: #4D4E50;
}
    img { outline:0; }
    a img { border:none; }
    p { margin: 1em 0; }
    @-ms-viewport { width: device-width; }
    @media only screen and (max-width: 700px) {
    body .container { width:100% !important; }
    body .footer { width:auto !important; margin-left:0; }
    body .mobile-hidden, body .sideblock-hidden { display:none !important; }
    body .logo { display:block !important; padding:0 !important; }
    body .photo img { width:100% !important; height:auto !important; }
    body .drop { display:block !important; width: 100% !important; }
    body .nav4, body .nav5, body .nav6 { display: none !important; }
    body .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both; }
    }
        </style>
<body bgcolor="#ffffff" text="#000000" style="color: #000000; margin: 0px; padding:0px; -webkit-text-size-adjust:none;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec">
<tr><td style="font-size: 11px; font-family: 'Helvetica', 'Arial', sans-serif; color:#000000;"><p align="center"><a href="@{mv_online_version}@" target="_blank" style="color:#d92027">View this email in your web browser</a></p></td></tr>
<tr><td>
<table width="650" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="container">
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">


<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td class="photo"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/header.jpg" width="620" height="150" alt="ENR InfoCenter"/></td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr></table>



</td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td>

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="font-size: 20px; line-height:24px; font-family: 'Georgia', 'Times New Roman', 'Times', serif; color:#393939;"><em>Technology Use in Construction</em></td></tr>
<tr><td><hr size="1" color="#cccccc" /></td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="180" class="drop" valign="top"><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" target="_blank"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/1.jpg" width="180" height="180" alt="Photo of construction workers take a break"/></a></td>
<td width="15" class="drop"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td>
<td class="drop" valign="top" style="font-size: 14px; line-height:20px; font-family: 'Helvetica', 'Arial', sans-serif; color:#545454;">
<span style="font-size: 22px; line-height:26px; font-family: 'Helvetica', 'Arial', sans-serif; color:#336899;"><strong>The Benefits of the Construction Equipment Rental Model</strong></span><br />
<em><strong>Construction companies are saving time and money by renting equipment, like forklifts and site cameras, more often.</strong></em><br /><br />

In 2022, <a href="https://www.statista.com/statistics/1224817/reasons-contractors-rented-construction-equipment-us/" target="_blank" style="color:#d92027">62%</a> of contractors rented construction equipment because it provided more flexibility than owning. Specifically, contractors liked that they could return the equipment whenever they wanted with less overhead.<br /><br />

While buying construction equipment can sometimes be more practical than renting, it's not always the best option. In fact, industry experts say that if contractors use a piece of equipment <a href="https://www.constructionbusinessowner.com/equipment/deciding-whether-buy-construction-equipment-or-rent#:~:text=In%20the%20construction%20industry%2C%20a,purchasing%20or%20leasing%20the%20equipment." target="_blank" style="color:#d92027">less than 40% of the time</a>, it's smarter to rent it.<br /><br />

<strong><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" target="_blank" style="color:#d92027">Continue Reading &rarr;</a></strong>
</td></tr>
</table>
</td></tr>

</table>
</td></tr>
</table>


</td></tr>
</table>
</td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

Solution

The code provided didn't have any th so here is a working example of the functionality you are after using your table but with minimal code.

@media only screen and (max-width:480px){
    .columns th{
      display:block !important;
      width:100%!important;
    }
  }

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="columns">
        <tr>
          <th width="180" class="drop" valign="top" style="font-weight:normal;padding:0px;margin:0px;"><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" target="_blank"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/1.jpg" width="180" height="180" alt="Photo of construction workers take a break"/></a></th>
          <th width="15" class="drop" style="font-weight:normal;padding:0px;margin:0px;text-align:left;"><div style="font-size:0pt; line-height:0pt; height:10px"> <img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" /> </div></th>
          <th class="drop" valign="top" style="font-size: 14px; line-height:20px; font-family: 'Helvetica', 'Arial', sans-serif; color:#545454;font-weight:normal;padding:0px;margin:0px;text-align:left;"><span style="font-size: 22px; line-height:26px; font-family: 'Helvetica', 'Arial', sans-serif; color:#336899;"><strong>The Benefits of the Construction Equipment Rental Model</strong></span><br />
            <em><strong>Construction companies are saving time and money by renting equipment, like forklifts and site cameras, more often.</strong></em><br />
            <br />
            In 2022, <a href="https://www.statista.com/statistics/1224817/reasons-contractors-rented-construction-equipment-us/" target="_blank" style="color:#d92027">62%</a> of contractors rented construction equipment because it provided more flexibility than owning. Specifically, contractors liked that they could return the equipment whenever they wanted with less overhead.<br />
            <br />
            While buying construction equipment can sometimes be more practical than renting, it's not always the best option. In fact, industry experts say that if contractors use a piece of equipment <a href="https://www.constructionbusinessowner.com/equipment/deciding-whether-buy-construction-equipment-or-rent#:~:text=In%20the%20construction%20industry%2C%20a,purchasing%20or%20leasing%20the%20equipment." target="_blank" style="color:#d92027">less than 40% of the time</a>, it's smarter to rent it.<br />
            <br />
            <strong><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" target="_blank" style="color:#d92027">Continue Reading &rarr;</a></strong></th>
        </tr>
      </table>

Additions done to your code:

Class added to your table
Media query added
td changed to th for the table
Style added font-weight:normal;padding:0px;margin:0px;text-align:left; to each th. This is done because th by default has a bolder font weight and text is always centred. Margin and Padding is just added to be safe if email clients have their own code being added