My responsive HTML Email is not responsive

Question

I set up a simple 2-column (on desktop screens) HTML Email based on code I got from a manual (course I did some time ago). When I tested the email I found it displayed correctly on Android mobile phones (the 2-column display changes to a 1-column display as required), however, when viewed in iPhone 5 (haven't tried iPhone 6 or greater) the email does not behave responsively i.e. the 2-column display does not change to a single column display as it should.

See email code CSS/ HTML below. I've also set up a CodePen at: https://codepen.io/Ben10/pen/GvGgZo

I wonder if anyone can point out what is wrong with (or missing from) the CSS/HTML code. How can I fix this problemo? I've checked around the web but I'm now more confused than ever. HTML email seems to be a minefield of problems.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date Night Exclusive Picks Inlined Complete</title>

    <style>

    @media only screen and (max-width:680px){

    /*.wrapper{*/
    table[class="wrapper"]{
        max-width:680px !important;
        width:100% !important;      
    }

    td[class="deviceWidth"]{
        display:block !important;
        padding:0 !important;
        width:100% !important;
    }

    td[class="row"]{
        padding:15px 10px !important;
    }

    [class="deviceWidth"] p{
        font-size:16px !important;
    }

    a[class="bookLink"]{
        font-size:16px !important;
    }

    /*.resImg{*/
    img[class="resImage"]{
        height:auto !important;
        width:100% !important;
    }

    /*h1{*/
    [class="wrapper"] h1{
        font-size:24px !important;
    }

    [class="wrapper"] h2{
        margin-top:15px !important;
    }
} /* close media query max-width:680px */

@media only screen and (max-width:480px){

        td[class="mobileBanner"]{
            background-image:url(http://www.nobledesktop.com/nl-date-
            night/img/header-mobile@2x.png) !important;
        background-repeat:no-repeat !important;
        background-position:center top !important;
        background-size:cover !important;
    }

    [class="mobileBanner"] img{
        display:none !important;
    }

    [class="mobileBanner"] a{
        display:block !important;
        padding-top:43.333% !important;
    }

    } /* close media query max-width:480px */


</style>


</head>
<body style="margin: 0;">

<table class="wrapper" align="center" border="0" cellpadding="0" 
cellspacing="0" width="680">
<tr>
    <td class="mobileBanner" align="center" width="100%">
        <p class="preheader" style="color: #ffffff;font-family: Helvetica, 
   Arial, sans-serif;font-size: 2px;line-height: 140%;margin-bottom: 
   0;margin-top: 0;display: none;">Punch-drunk in love? Go boxing with your 
    sweetheart. This and more great dates inside!</p>
        <a href="#" target="_blank"><img class="resImage" 
   src="http://www.nobledesktop.com/nl-date-night/img/header.png" 
  width="680" alt="Date Night" style="display: block;border: none;" moz-do-
  not-send="true"></a>

    </td>
</tr>

<tr>

    <td align="center" width="100%">

        <!-- NESTED TABLE -->

        <table align="center" border="0" cellpadding="0" cellspacing="0" 
  width="100%">
            <tr>
                <td class="mainContent" align="center" width="100%" 
  style="padding: 20px;border-bottom: 10px solid #e64a33;">
                    <h1 style="color: #69655c;font-family: Arial, Helvetica, 
  sans-serif;font-size: 40px;font-weight: bold;margin: 0;">This Week&#8217;s 
  Exclusive Picks</h1>

                    <!-- LISTING ONE -->

                    <table align="center" border="0" cellpadding="0" 
  cellspacing="0" width="100%">
                        <tr>
                            <td class="row" align="center" width="100%" 
  style="padding:20px;">

                                <table align="center" border="0" 
  cellpadding="0" cellspacing="0" width="100%">
                                    <tr>

                                        <!-- LEFT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-right:10px;">
                                            <a href="#" target="_blank"><img 
  class="resImage" src="http://www.nobledesktop.com/nl-date-
  night/img/couple-boxing@2x.jpg" width="290" alt="Couple Fighting" 
  style="display: block;border: none;" moz-do-not-send="true"></a>
                                        </td>

                                        <!-- RIGHT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-left:10px;">
                                            <h2 style="color: #696969;font-
  family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 
  140%;margin-top: 0;margin-bottom: 0;">OUT OF THE BOX DATES: BOXING 
 FOR&nbsp;TWO</h2>
  <p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
  size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">If you 
  enjoyed our punny joke, you&#8217;ll love our selection of unique and out 
  of the box dates. They&#8217;re designed to ignite a budding relationship 
  or bring some new spark to an old flame. Dinner and drinks is 
  yesterday&#8217;s news, so get geared up and fight it out in the ring or 
  take it down a level with lazy river meditation. Expect to see a new and 
  exciting date added to the date book every week. <a class="bookLink" 
  href="#" target="_blank" style="color: #e74b34; font-size: 10px; font-
  weight: bold;">Book Now</a></p>
                                        </td>

                                    </tr>
                                </table>

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

                    <!-- LISTING TWO -->

                    <table align="center" border="0" cellpadding="0" 
  cellspacing="0" width="100%">
                        <tr>
                            <td class="row" align="center" width="100%" 
  style="padding:20px;" bgcolor="#eeeeee">

                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>

                                        <!-- LEFT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-right:10px;">
                                            <a href="#" target="_blank"><img 
  class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/beer-
  bar-label@2x.jpg" width="290" alt="Open Bar" style="display: block;border: 
  none;" moz-do-not-send="true"></a>
                                        </td>

                                        <!-- RIGHT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-left:10px;">
                                            <h2 style="color: #696969;font-
  family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 
  140%;margin-top: 0;margin-bottom: 0;">NEW BAR CRAWL PACKAGE&mdash;ALSO AS 
  A DOUBLE DATE!</h2>
  <p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
  size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You asked 
  and we delivered! Introducing our first optional double date package, the 
  Couples&#8217; New York Bar Crawl. Spend a Friday or Saturday night 
  exploring the nightlife in a new area with your loved one and friends. 
  You&#8217;ll visit five different bars in close proximity to each 
  other&mdash;no cabs or transportation required. Most importantly, the 
  first drink at every bar is on us! Check it out now for the special grab a 
  date price!  <a class="bookLink" href="#" target="_blank" style="color: 
  #e74b34;font-size: 10px;font-weight: bold;">Book Now</a></p>
                                        </td>

                                    </tr>
                                </table>

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

                    <!-- LISTING THREE -->

                    <table align="center" border="0" cellpadding="0" 
  cellspacing="0" width="100%">
                        <tr>
                            <td class="row" align="center" width="100%" 
  style="padding:20px;">

                                <table align="center" border="0" 
  cellpadding="0" cellspacing="0" width="100%">
                                    <tr>

                                        <!-- LEFT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-right:10px;">
                                            <a href="#" target="_blank"><img 
  class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/milan-
  canal@2x.jpg" width="290" alt="Canal Cruise - Milan" style="display: 
  block;border: none;" moz-do-not-send="true"></a>
                                        </td>

                                        <!-- RIGHT COLUMN -->

                                        <td class="deviceWidth" align="left" 
  width="50%" valign="top" style="padding-left:10px;">
                                            <h2 style="color: #696969;font-
  family: Helvetica, Arial, sans-serif;font-size: 16px;line-height: 
  140%;margin-top: 0;margin-bottom: 0;">DELUXE WEEKEND: FAR-FLUNG AND 
  ROMANTIC</h2>
  <p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
  size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You two are 
  so busy that a 7-day work week is all too familiar. Time to de-stress and 
  take a weekend to remember why you work so hard. Put your routine on pause 
  and enjoy a short vacation to an enchanted location. Choose from over 15 
  exotic remote and not-so-remote locations. Weekend date prices include a 
  hotel for two, a bottle of wine, and a planned activity. <a 
  class="bookLink" href="#" target="_blank" style="color: #e74b34;font-size: 
  10px;font-weight: bold;">Book Now</a></p>
                                        </td>

                                    </tr>
                                </table>

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




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



    </td>
</tr>

</table>


</body>
</html>

score 0 · Answer 1 · answered Aug 23 '17 at 01:38

First of all a table get responsive. Responsiveness only works upto some extend. you should use div and give float property to them. For example

<style>
    .div1 {
          max-width:680px !important;
          width:100% !important;
     }

      .div1 > img {
          max-width:200px !important;
          width:100% !important;
          float: left;
      }

      .div1 > .text-div {
          max-width:480px !important;
          width:100% !important;
          float: right;
      }

      .clear-fix 
      {
           content: " "; /* Older browser do not support empty content */
           visibility: hidden;
           display: block;
           height: 0;
           clear: both;
      }

</style>


<div class="div1">
    <img src=""/>
    <div class="text-div">
         <h5>OUT OF THE BOX DATES: BOXING FOR&nbsp;TWO</h5>  
         <p>If you enjoyed our punny joke, you&#8217;ll love our selection of unique and out of the box dates. 
         They&#8217;re designed to ignite a budding relationship or bring some new spark to an old flame. 
         Dinner and drinks is yesterday&#8217;s news, so get geared up and fight it out in the ring or take it down a level with lazy river meditation. 
         Expect to see a new and exciting date added to the date book every week.</p>
    </div>
</div>

And don't forget to add this meta tag in your head tag

<meta name="viewport" content="width=device-width, initial-scale=1">

you can find about clear-fix here:

What is a clearfix?

Hi @AnumR, Thanks for your answer. However, doesn't using DIV tags contradict the generally accepted rule-of-thumb for HTML EMAIL that you should use TABLES for layout. I've read through MAILCHIMP and CAMPAIGN MONITOR documentation and they all emphasize use of TABLES. — Ben, Aug 23 '17 at 01:55

My responsive HTML Email is not responsive

1 Answers1