mobile CSS quirks - how to get rid of outer margins?

I've coded a few campaigns - and had great luck - using variations of the mobile-friendly strategies from the campaignmonitor.com/blog posts. I'm working on one currently that is causing me some pain - particularly in that the 'page' is rendering with wide margins. The table inner table itself seems to be rendering fine, I think it's rendering at 300px, but its as if the viewport is rendering @ 640px. Yes, it's an iPhone 4 (retina), but my other emails haven't shown this behaviour. Similarly, on BB Torch, the user has to scroll sideways, past the margin, to center the 300px table(s). Has anyone seen this issue? and have a secret for squashing the outer margins? I've tried setting the background table both to 300px and 100%. I've tried setting the body width at 100% and just leaving it undeclared. I've got all my layout tables and cells set to 300px and my sidebar cells are display:none. I'm pretty baffled. I've tried adding the meta viewport tag with width=device-width, initial-scale=1.0 and leaving it out.
My mobile CSS begins with: @media only screen and (max-device-width: 480px)
Iphone screenshot (the goal is to have the content fill the width of the viewport/screen, not these huge margins):

http://scarfe.ca/files/email-margins.png

Any help would be appreciated.

andjules, 5 years ago

Also, I experienced a great number of quirks trying to use class-selector notation - instead of regular CSS syntax - in order to not get mobile rendering in Yahoo! mail.
"table[class=table], td[class=cell]" seems to work fine for the width declaraton, but not display:none (I need to use ".hide" instead of "td[class=hide]", for example or iOS won't hide the selected elements). Anyone else struggled with this?

roshodgekiss roshodgekiss, 5 years ago

Hi andjules, any chance you can post your code here? First thing I'd try is removing the background table and seeing if you have any luck with that.

(I need to use ".hide" instead of "td[class=hide]", for example or iOS won't hide the selected elements). Anyone else struggled with this?

Very curious - we used display: none; successfully for our progressive disclosure technique. Take a look at our code sample and let us know if you are still coming across troubles here.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
andjules, 5 years ago

Thanks Ros.
here is a simplified version of the code - background table removed, much of the decorative CSS removed, but the basic structure still in tact, and the layout issue (wide margins on open in mobile) still there. I can send you the full decorative code if necessary, but I thought it'd be easier if there was 'less' to wade through.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Main Street Capital | Newsletter Template</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->
    <meta name="author" content="SakicScarfe">

    <style type="text/css">
        @media only screen and (max-device-width: 480px) {
            .center {
             text-align: center !important;
           }
           .m-hide, .m-hide td {
             display: none !important;
            }
         table[class=table], td[class=cell] {
           width: 304px !important;
         }
            table[class=tablesm], td[class=cellsm] {
                width: 294px;
            }
         .cell {
              padding-left:4px;
              padding-right:4px;
         }
    }
    #outlook a {padding:0;} 
    body{ margin:0; padding:0;} 

    img {outline:none; text-decoration:none; } 
    a img {border:none;} 
    .global td {
        background-color: #585858; 
        font: 14px/1.4em 'Helvetica Neue', Arial, sans-serif;
    }
    
    </style>
</head>
<body bgcolor="#383838" style="width:100%; background-color:#ececec; margin-top:0; margin-bottom:0; margin-right:0; margin-left:0; padding-top:0; padding-bottom:0; padding-right:0; padding-left:0;">
                <table width="700" border="0" cellpadding="0" cellspacing="0" class="global table">
                    <tr>
                        <td width="10" class="m-hide">&nbsp;</td>
                        <td>
                            <table width="680" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
                                <tr class="preheader">
                                    <td width="20" class="m-hide">&nbsp;</td>
                                    <td colspan="3" class="prehead cell">Use this area for a SHORT key announcement or teaser.</td>
                                    <td width="20" class="m-hide">&nbsp;</td>
                                </tr>
                                <tr class="preheader blueborder m-hide">
                                    <td>&nbsp;</td>
                                    <td width="200" style="color:#b8b8b8;">Tuesday, November 21, 2011</td>
                                    <td width="20">&nbsp;</td>
                                    <td width="200" align="right"><a href="#" class="webversion">View in Browser</a></td>
                                    <td>&nbsp;</td>
                                </tr>
                                <tr class="header">
                                    <td class="m-hide">&nbsp;</td>
                                    <td colspan="3" height="100" class="p20 cell">
                                        <a href="http://exampledomain.com"><img src="http://scarfe.ca/fsc/email/newsletter/logo.gif" alt="Main Street Capital" style="margin-bottom:30px;" width="184" height="38" class='logo'></a><br />
                                        <h1 class="dblue">Main Street XYX Income Fund II Ltd.</h1>
                                    </td>
                                    <td class="m-hide">&nbsp;</td>
                                </tr>
                                <tr class="body">
                                    <td class="m-hide">&nbsp;</td>
                                    <td class="sidebar p20 m-hide">
                                        <div class="section">
                                            <img src="http://scarfe.ca/fsc/email/newsletter/chris.jpg" alt="John Doe" width="160" height="166">
                                            <h4>John Doe</h4>
                                            <p><strong>National Director of Sales<br>
                                            123-345-6789</strong></p>
                                        </div>
                                        <div class="section">
                                            <h4 class="blue">Links &amp; Downloads</h4>
                                            <p><a href="#"><strong>Book a Meeting</strong></a><br>
                                                <a href="#"><strong>Greensheet</strong></a><br>
                                                <a href="#"><strong>Prospectus</strong></a><br>
                                                <a href="#"><strong>Guide to XYX Investing</strong></a></p>
                                        </div>
                                        <div class="section">
                                            <p><a href="#">Advisor Video<br>
                                            <img src="http://scarfe.ca/fsc/email/newsletter/video.jpg" alt="Advisor Video" width="182" height="125"></a></p>
                                        </div>
                                        <div class="section">
                                            <p><a href="#">Client Video<br>
                                            <img src="http://scarfe.ca/fsc/email/newsletter/video.jpg" alt="Advisor Video" width="182" height="125"></a></p>
                                        </div>
                                    </td>
                                    <td class="m-hide">&nbsp;</td>
                                    <td class="content p20 cell">
                                        <div class="section">
                                            <h3>Please be advised that today is the last day to purchase the re-opened Main Street XYX Income Fund II. The books will close at 4pm (EST).</h3>
                                            <p>Please review the links and downloads for additional details, including the Prospectus, Greensheet, Guide to Investing in XYXs and video files for you and your clients.</p>
                                        </div>
                                        <div class="section">
                                            <h3>Main Street XYX Income Fund Ltd. Overview</h3>
                                            <p>The Main Street XYX Income Fund Ltd. will provide tax-advantaged exposure to the performance of an actively managed, diversified portfolio of energy infrastructure master limited partnerships (XYXs). </p>
                                        </div>
                                        <div class="section">
                                            <h3>What is a XYX?</h3>
                                            <p>XYXs are limited partnerships that are publicly traded on U.S. securities exchanges, primarily engaged in the transportation, storage, processing, refining, marketing, exploration, production, and mining or minerals or natural resources.</p>
                                            <p>XYXs originated in the 1980s through tax laws passed by the U.S. Congress designed to encourage investment in energy and natural resources. Taxes are only paid by the partners in the XYX, similar to Canadian income trusts.</p>
                                        </div>
                                        <div class="section">
                                            <h3>Highlights of the Main Street XYX Income Fund Ltd.</h3>
                                            <p><strong>Indicative Purchase Price:</strong> $8.01 per unit<br>
                                                <strong>Management Fee:</strong> 1.50%<br>
                                                <strong>Distributions:</strong> (ROC) Quarterly, $0.13125 or 6.5% p/a (9.4% pre-tax equivalent)<br>
                                                <strong>Redemption:</strong> November 30, 2012, and annually thereafter.<br>  
                                                <strong>Selling Concession:</strong> 2.25%<br>
                                                <strong>Listing:</strong> TSX<br>
                                                <strong>US Dollar Series:</strong> U Series<br>
                                                <strong>Cdn Dollar Series:</strong> C Series<br>
                                                <strong>Currency Hedge:</strong> Hedged to the Canadian dollar<br>
                                                <strong>Eligibility:</strong> RRSP's, RRIF's DPSPs, RDSP's, RESPs and TSFAs<br>
                                                <strong>Closing:</strong> Tuesday, October 18</p>
                                            <p>Educational tools and resources are also available at:<br>
                                                <a href="http://bigpath.com" target="_blank"><strong>bigpath.com</strong></a>
                                                </p>
                                        </div>
                                    </td>
                                    <td class="m-hide">&nbsp;</td>
                                </tr>
                                <tr class="footer">
                                    <td class="m-hide">&nbsp;</td>
                                    <td colspan="3" class="cell">
                                        <table border="0" align="center" cellpadding="0" cellspacing="0" class="tablesm">
                                            <tr class="footer-inner">
                                                <td width="440" height="80" class="p20 cellsm"><a href="http://exampledomain.com"><img src="http://scarfe.ca/fsc/email/newsletter/logo.gif" alt="Main Street Capital" style="margin-bottom: 6px;" width="184" height="38" class='logo'></a><br>
                                                <h4><a href="http://exampledomain.com">exampledomain.com</a></h4>
                                                <p class="address">33 Yonge Street, Suite 600&nbsp;&nbsp;&nbsp;Toronto&nbsp;&nbsp;&nbsp;Ontario&nbsp;&nbsp;&nbsp;M5E 1G4</p>
                                                </td>
                                                <td width="200" height="80" class="p20 m-hide">
                                                    <a href="#"><img src="http://scarfe.ca/fsc/email/newsletter/forward.gif" align="right" width="32" height="32" alt="Forward this Email"></a>
                                                    <h4 class="social"><a href="#">Forward this email </a></h4><p class="no-top">to someone you know</p>
                                                    <a href="#"><img src="http://scarfe.ca/fsc/email/newsletter/linkedin.jpg" align="right" width="32" height="32" alt="Share on LinkedIn"></a></a>
                                                    <h4 class="social"><a href="#">Share on LinkedIn</a> </h4><p class="no-top">with your network</p>
                                                    <p class="address">Not interested? <unsubscribe><strong>Unsubscribe.</strong></unsubscribe></p>
                                                </td>
                                            </tr>
                                        </table>                        
                                    </td>
                                    <td class="m-hide">&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                        <td width="10" class="m-hide">&nbsp;</td>
                    </tr>
                </table>
</body>
</html>

and I've been choosing to let campaignmonitor bring the css inline.

roshodgekiss roshodgekiss, 5 years ago

Hi andjules, no worries at all here - it turns out that the container table wasn't resizing on small displays, but the non-hidden cells were. I've tweaked and pared down the code so that it now resizes properly:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Main Street Capital | Newsletter Template</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->
<meta name="author" content="SakicScarfe">
<style type="text/css">
@media only screen and (max-device-width: 480px) {
 .center {
 text-align: center !important;
}
 .m-hide, .m-hide td {
 display: none !important;
}
 table[class=table], td[class=cell] {
 width: 304px !important;
}
 table[class=tablesm], td[class=cellsm] {
 width: 294px !important;
}
 .cell {
 padding-left:4px;
 padding-right:4px;
}
}
#outlook a {
    padding:0;
}
body {
    margin:0;
    padding:0;
}
img {
    outline:none;
    text-decoration:none;
}
a img {
    border:none;
}

table.table { background-color: #585858; font: 14px/1.4em 'Helvetica Neue', Arial, sans-serif;}

</style>
</head>
<body bgcolor="#383838" style="width:100%; background-color:#ececec; margin-top:0; margin-bottom:0; margin-right:0; margin-left:0; padding-top:0; padding-bottom:0; padding-right:0; padding-left:0;">
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
  <tr>
    <td><table width="680" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
        <tr class="preheader">
          <td width="20" class="m-hide">&nbsp;</td>
          <td colspan="3" class="prehead cell">Use this area for a SHORT key announcement or teaser.</td>
          <td width="20" class="m-hide">&nbsp;</td>
        </tr>
        <tr class="preheader blueborder m-hide">
          <td>&nbsp;</td>
          <td width="200" style="color:#b8b8b8;">Tuesday, November 21, 2011</td>
          <td width="20">&nbsp;</td>
          <td width="200" align="right"><a href="#" class="webversion">View in Browser</a></td>
          <td>&nbsp;</td>
        </tr>
        <tr class="header">
          <td class="m-hide">&nbsp;</td>
          <td colspan="3" height="100" class="p20 cell"><a href="http://exampledomain.com"><img src="http://scarfe.ca/fsc/email/newsletter/logo.gif" alt="Main Street Capital" style="margin-bottom:30px;" width="184" height="38" class='logo'></a><br />
            <h1 class="dblue" style="line-height: 1;">Main Street XYX Income Fund II Ltd.</h1></td>
          <td class="m-hide">&nbsp;</td>
        </tr>
        <tr class="body">
          <td class="m-hide">&nbsp;</td>
          <td class="sidebar p20 m-hide"><div class="section"> <img src="http://scarfe.ca/fsc/email/newsletter/chris.jpg" alt="John Doe" width="160" height="166">
              <h4>John Doe</h4>
              <p><strong>National Director of Sales<br>
                123-345-6789</strong></p>
            </div>
            <div class="section">
              <h4 class="blue">Links &amp; Downloads</h4>
              <p><a href="#"><strong>Book a Meeting</strong></a><br>
                <a href="#"><strong>Greensheet</strong></a><br>
                <a href="#"><strong>Prospectus</strong></a><br>
                <a href="#"><strong>Guide to XYX Investing</strong></a></p>
            </div>
            <div class="section">
              <p><a href="#">Advisor Video<br>
                <img src="http://scarfe.ca/fsc/email/newsletter/video.jpg" alt="Advisor Video" width="182" height="125"></a></p>
            </div>
            <div class="section">
              <p><a href="#">Client Video<br>
                <img src="http://scarfe.ca/fsc/email/newsletter/video.jpg" alt="Advisor Video" width="182" height="125"></a></p>
            </div></td>
          <td class="m-hide">&nbsp;</td>
          <td class="content p20 cell"><div class="section">
              <h3>Please be advised that today is the last day to purchase the re-opened Main Street XYX Income Fund II. The books will close at 4pm (EST).</h3>
              <p>Please review the links and downloads for additional details, including the Prospectus, Greensheet, Guide to Investing in XYXs and video files for you and your clients.</p>
            </div>
            <div class="section">
              <h3>Main Street XYX Income Fund Ltd. Overview</h3>
              <p>The Main Street XYX Income Fund Ltd. will provide tax-advantaged exposure to the performance of an actively managed, diversified portfolio of energy infrastructure master limited partnerships (XYXs). </p>
            </div>
            <div class="section">
              <h3>What is a XYX?</h3>
              <p>XYXs are limited partnerships that are publicly traded on U.S. securities exchanges, primarily engaged in the transportation, storage, processing, refining, marketing, exploration, production, and mining or minerals or natural resources.</p>
              <p>XYXs originated in the 1980s through tax laws passed by the U.S. Congress designed to encourage investment in energy and natural resources. Taxes are only paid by the partners in the XYX, similar to Canadian income trusts.</p>
            </div>
            <div class="section">
              <h3>Highlights of the Main Street XYX Income Fund Ltd.</h3>
              <p><strong>Indicative Purchase Price:</strong> $8.01 per unit<br>
                <strong>Management Fee:</strong> 1.50%<br>
                <strong>Distributions:</strong> (ROC) Quarterly, $0.13125 or 6.5% p/a (9.4% pre-tax equivalent)<br>
                <strong>Redemption:</strong> November 30, 2012, and annually thereafter.<br>
                <strong>Selling Concession:</strong> 2.25%<br>
                <strong>Listing:</strong> TSX<br>
                <strong>US Dollar Series:</strong> U Series<br>
                <strong>Cdn Dollar Series:</strong> C Series<br>
                <strong>Currency Hedge:</strong> Hedged to the Canadian dollar<br>
                <strong>Eligibility:</strong> RRSP's, RRIF's DPSPs, RDSP's, RESPs and TSFAs<br>
                <strong>Closing:</strong> Tuesday, October 18</p>
              <p>Educational tools and resources are also available at:<br>
                <a href="http://bigpath.com" target="_blank"><strong>bigpath.com</strong></a> </p>
            </div></td>
          <td class="m-hide">&nbsp;</td>
        </tr>
        <tr class="footer">
          <td class="m-hide">&nbsp;</td>
          <td colspan="3" class="cell"><table border="0" align="center" cellpadding="0" cellspacing="0" class="tablesm">
              <tr class="footer-inner">
                <td width="440" height="80" class="p20 cellsm"><a href="http://exampledomain.com"><img src="http://scarfe.ca/fsc/email/newsletter/logo.gif" alt="Main Street Capital" style="margin-bottom: 6px;" width="184" height="38" class='logo'></a><br>
                  <h4><a href="http://exampledomain.com">exampledomain.com</a></h4>
                  <p class="address">33 Yonge Street, Suite 600&nbsp;&nbsp;&nbsp;Toronto&nbsp;&nbsp;&nbsp;Ontario&nbsp;&nbsp;&nbsp;M5E 1G4</p></td>
                <td width="200" height="80" class="p20 m-hide"><a href="#"><img src="http://scarfe.ca/fsc/email/newsletter/forward.gif" align="right" width="32" height="32" alt="Forward this Email"></a>
                  <h4 class="social"><a href="#">Forward this email </a></h4>
                  <p class="no-top">to someone you know</p>
                  <a href="#"><img src="http://scarfe.ca/fsc/email/newsletter/linkedin.jpg" align="right" width="32" height="32" alt="Share on LinkedIn"></a></a>
                  <h4 class="social"><a href="#">Share on LinkedIn</a> </h4>
                  <p class="no-top">with your network</p>
                  <p class="address">Not interested?
                    <unsubscribe><strong>Unsubscribe.</strong></unsubscribe>
                  </p></td>
              </tr>
            </table></td>
          <td class="m-hide">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

A tip for the future is to replace @media only screen and (max-device-width: 480px) { with @media (max-width: 600px) { to test your design in the browser. It's much easier to debug these issues on your machine, rather than on your mobile device. All the best!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
andjules, 5 years ago

Thanks SO much, Ros. I'm still going through it looking for differences (of course I've got to rebuild the non-simplified version), I'm wondering if it mostly came down to whitespace within <td>s?

andjules, 5 years ago

FOLLOW-UP... I just spent a great deal of time trying to add back in the decorative elements I had pulled out to simplify the problem for this thread. The most important thing I discovered:
- maybe everyone knows this - I didn't - but you CAN NOT use compound classes and attribute-selector notation. In other words:
- - with

<td class="cell blue">

you can do

.cell { width: 300px !important }

but

td[class=cell] { width: 300px! important }

will not work. It will only work it there is only one class in the element, ie.:

<td class="cell">

Again, maybe everyone knew this, but I sure didn't.
#twohoursofmylifeiwillnevergetback

roshodgekiss roshodgekiss, 5 years ago

Hi andjules, thanks for the follow up here :) I don't think it was so much white-space in <td> as some classes that applied column widths had been incorrectly applied, as in table.table vs table.tablesm. But it's all good :)

Note that the CSS class format should be td[class=cell] { width: 300px !important }, not td[class=cell] { width: 300px! important }. Let us know if you have better luck with this.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
andjules, 5 years ago
roshodgekiss :

not td[class=cell] { width: 300px! important }

Yes, I definitely had some late-night, poor-proofing sloppiness working against me as well.

andjules, 5 years ago

p.s. Just discovered this:
http://www.iwebinspector.com/
hoping it will help nicely with debugging

roshodgekiss roshodgekiss, 5 years ago

That's a great resource, I'll certainly spread the word about that one! Thanks, andjules!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098