Display settings 125% Windows and HTML Emails

I hope someone can assist me. I design HTML emails that are responsive using Media queries and inline CSS. My emails render well everywhere i test. Lately i have run into a new problem for me.

When i email my html emails to user that have their display setup to medium. (Windows. > Control Panel > Display > Medium 125%) it breaks my design.

I use 100% values in my code to achieve responsive design. If i remove this value my email will not display correctly in smartphones and tablets.

Is there a way to target this display value so my email renders correctly? Maybe a zoom value or a conditional statement.


Code is below

<!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>Coldwell Banker Arizona Facebook</title>

    <style>
            /* Outlook link fix */
        #outlook a {padding:0;}
        /* Hotmail background & line height fixes */
        .ExternalClass {width:100% !important;}
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
        .ExternalClass td, .ExternalClass div {line-height: 100%;}


        /* Media Query for mobile */
        @media screen and (max-width: 480px) {

         /* table container to fill 100% of screen on mobile */table[class=containerwrapto100], img[class=containerwrapto100] 
         { width:100% !important; height:auto !important; } 


            /* table container to fill 100% of screen on mobile */   table[class=hidemobile], img[class=hidemobile], p[class=hidemobile] , li[class=hidemobile]
            , span[class=hidemobile]
         { display:none !important; } 



     /* convert hyperlinks to mobile friendly buttons: 44 x 44 is standard. */

            a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background: #336666 !important; border-radius:5px !important; border-color:#c8d7dc !important; border-width:2px !important; border-style: solid !important; margin:10px auto;width:70%; text-align:center; color:#162d55 !important; text-decoration:none; text-shadow:#fff 0px 0 0;  

background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3)) !important;
 background-image: -webkit-linear-gradient(top, #f2f5f6, #7089b3)!important;
 background-image: -moz-linear-gradient(top, #f2f5f6, #c8d7dc)!important;
 background-image: -ms-linear-gradient(top, #f2f5f6, #c8d7dc)!important;
 background-image: -o-linear-gradient(top, #f2f5f6, #c8d7dc)!important;
 background-image: linear-gradient(to bottom, #f2f5f6, #c8d7dc);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f2f9fe, endColorstr=#d6f0fd)!important;

            }


         /* images  container to fill 100% of screen on mobile */
 a[class="mobileshow"], a[class="mobilehide"] { 
        display: block !important; 
        color:  #fff  !important; 
        background-color:  #aaa ; 
        border-radius: 20px; 
        padding: 0 8px; 
        text-decoration: none; 
        font-weight: bold; 
        font-family: "Helvetica Neue", Helvetica, sans-serif; 
        font-size: 11px; 
        position: absolute; 
        top: 200px; 
        right: 10px; 
        text-align: center; 
        width: 40px;
    }
    div[class="article"] {
        display: none;
    }
    a.mobileshow:hover { 
        visibility: hidden;
    } 
    .mobileshow:hover + .article, .article:hover {
        display: inline !important;
    }
}
            @media screen and (max-width: 480px) {
         table[class=containerwrapto100], img[class=containerwrapto100] 
         { width:100% !important; height:auto !important; } 
         /* table container to fill 100% of screen on mobile */
        td[class=emailcolsplit]{width:100% !important; float: left !important;} /* When using 2 or more columns in a table this class will stretch the first column to 100% */

                                    /* table container to fill 100% of screen on mobile */   table[class=hidemobile], img[class=hidemobile], p[class=hidemobile] 
         { display:none !important; }
                /* This resizes body text for mobiles */
        span[class=emailbodytext],a[class=emailbodytext]{font-size:16px !important; line-height:21px !important;}
        span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}


            }

                        @media screen and (max-width: 600px) {
         table[class=containerwrapto100], img[class=containerwrapto100] 
         { width:100% !important; height:auto !important; } 


            /* table container to fill 100% of screen on mobile */   table[class=hidemobile], img[class=hidemobile], p[class=hidemobile], li[class=hidemobile] 
         { display:none !important; }

            }

            @media screen and (max-width: 700px) {
         table[class=containerwrapto100], img[class=containerwrapto100] 
         { width:100% !important; height:auto !important; } 


                         p[class=hidephablet]
         { display:none !important; } 
         /* hide p tags on phablet devices*/

            }

        </style>



    <link media="screen,projection" rel="stylesheet" type="text/css" />

    </head>

<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased; width:100% !important; background-color: #e4e4e4 !important; -webkit-text-size-adjust: none;">

<!-- Wrapper Table for Email --> 
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e4e4e4">
            <tr>
                <td align="center" valign="top">



       <!-- Main Table for Email --> <table width="625" cellpadding="0" cellspacing="0" border="0" align="center" class="containerwrapto100">
            <tr bgcolor="#e4e4e4">
              <td width="625">





<table width="625" cellpadding="0" cellspacing="0" border="0"  class="containerwrapto100">
            <tr>
                <td bgcolor="#e4e4e4">


                <img src="https://www.insideazmoves.com/sites/default/files/user_files/library/public/Email/AZ_eMarketing_Help_Desk_header.jpg" alt="Like Coldwell Banker Residential Brokerage, Arizona on Facebook" width="625" height="147" border="0" style="display:block; width:625; height:147;" class="containerwrapto100" />


   <!--Start of the multiple column table -->

<table border="0" cellspacing="0" cellpadding="0" width="625" bgcolor="#FFFFFF" background="http://www.insidecb.net/insideCBnow/AZ/images/Email/WebStats/bodybg.png" 
    style="color: #333333 !important; border-bottom: solid 1px #ccc;" class="containerwrapto100">
    <tr>
        <td class="emailcolsplit" align="center" valign="top" width="100%">

        <!--Start of the first column -->

            <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFFF">

  <tr>
    <td valign="top" style="color: #333333 !important; border-left: solid 10px #336699 !important; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 24px !important; text-align: left; margin-left: 19px; margin-right: 12px; margin-top: 1px; padding-left: 19px; padding-right: 12px;">

<h3 style="line-height:26px;">&nbsp;</h3>
<h3 style="line-height:26px;"><span class="emailh3">Just a quick reminder that we have an active Facebook page that agents and staff can join to get real-time news and updates. </span></h3>
<p style="line-height:26px;">&nbsp;</p>


<p align="center" style="line-height:24px;"><a href="http://www.facebook.com/coldwellbankerarizona"><img src="https://www.insideazmoves.com/sites/default/files/user_files/library/public/article_images/ColdwellBankerFacebookPage.jpg" alt="Coldwell Banker Arizona Facebook" width="500" border="0" class="containerwrapto100" style="display:block; width:500;"></a></p>



<p style="line-height:24px;"><span style="color:#004890;"> It is so easy to stay connected. Simply sign into your Facebook account,   search for Coldwell Banker Residential Brokerage Arizona or click this link: <a href="http://www.facebook.com/coldwellbankerarizona" title="http://www.facebook.com/coldwellbankerarizona" target="_new">Coldwell Banker Arizona</a>, and choose the like button on the page. </span></p>
<p style="line-height:24px;">Click on the link: <a href="http://www.facebook.com/coldwellbankerarizona" title="Coldwell Banker Arizona Facebook">www.facebook.com/coldwellbankerarizona</a> and Like Us to stay up-to-date with all the news, updates, and events involving Coldwell Banker Arizona.</p>


<p class="hidemobile" style="line-height:24px; color:#336699 !important;"><strong>By liking our Facebook page agents, employees and clients will be able to:</strong></p>
<ul  class="hidemobile"  style="color:#000000 !important; text-align:left; margin-left:20px; padding-left:30px;margin-right: 10px; margin-bottom:20px; font-family: Arial,  Helvetica, sans-serif; font-size: 13px; line-height: 20px;">
  <li class="hidemobile" style="margin-left:10px;">Stay in touch with all of our communications across the company. <br>
    <br>
  </li>
  <li  class="hidemobile"  style="margin-left:10px;">Have instant updates on our programs, announcements, stories and more!<br>
    <br>
  </li>
  <li  class="hidemobile"  style="margin-left:10px;">Allow our team and their sphere of influence to have an open  line of communication. <br>
    <br>
  </li>
  <li  class="hidemobile"  style="margin-left:10px;">Liking us on Facebook allows you to have information  in your hands faster. Social Media is the fastest form of communication and we will be updating our page with new and fresh content.</li>
</ul>

<p style="line-height:26px; margin-right: 10px; margin-bottom: 20px; font-family: Arial,Helvetica,sans-serif; font-size: 13px;">&nbsp;</p>
<p style="line-height:26px; margin-right: 10px; margin-bottom: 20px; font-family: Arial,Helvetica,sans-serif; font-size: 13px;"><strong>Brandon  Pines</strong><em>   <br>
  eMarketing Specialist,</em> Coldwell Banker Residential Brokerage</em><br>       <a href="mailto:brandon.pines@azmoves.com" title="mailto:brian.prendergast@azmoves.com"><span style="color:blue; ">brandon.pines@azmoves.com</span></a><br>       
  480.481.8414  </p>
<p>&nbsp;</p></td>

  </tr>

</table>


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


<img src="https://www.insideazmoves.com/sites/default/files/user_files/library/public/Email/sidebar_shadow.png#1" width="625" height="24" border="0"  style="display:block; width:625; height:24;" class="containerwrapto100">

   <!--Start of the two column table -->




<!--Start of the third column table -->


<table width="625" cellpadding="0" cellspacing="0" border="0" style="border-left: solid 10px #999 !important" class="containerwrapto100">      
                  <tr>

                      <td bgcolor="#ffffff" align="left">


<img width="314" height="21" border="0"  src="https://www.insideazmoves.com/sites/default/files/user_files/library/public/Email/environment.png" name="environment" alt="Please consider the environment before printing this email." /></td>

    </tr>

    <tr>


      <td bgcolor="#ffffff" align="left"><p style="color:#a6a6a6 !important; margin-left: 12px; padding-left: 12px; margin-right: 12px; margin-bottom: 5px;font-size:12px; font-family:Helvetica,Arial,sans-serif; line-height:18px;">
      <span style="color:#a6a6a6">You're receiving this because you're an agent or employee of Coldwell Banker Residential Brokerage in Arizona.</span></p>
                                <p style="color:#a6a6a6 !important; margin-left: 12px; padding-left: 12px;  margin-right: 12px; padding-bottom: 5px;font-size:12px; font-family:Helvetica,Arial,sans-serif; line-height:18px;"><span style="color:#a6a6a6"><strong>Coldwell Banker Residential Brokerage</strong><br />
                                  10466 N. 74th Street, Suite 100<br />
                            Scottsdale, AZ 85258-1021 </span></p>


<p style="color:#a6a6a6 !important; margin-left: 12px; padding-left: 12px;  margin-right: 12px; padding-bottom: 5px;font-size:12px; font-family:Helvetica,Arial,sans-serif; line-height:18px;"  class="reminder"><span style="color:#a6a6a6">If  this message does not display properly, <a href="mailto:websupport@azmoves.com?subject=There is an error with this email message"  title="Send us an email" target="_blank">CLICK HERE</a> to report the error.    </span></p>

<p style="color:#a6a6a6 !important; margin-left: 12px; padding-left: 12px;  margin-right: 12px; margin-bottom: 5px;font-size:12px; font-family:Helvetica,Arial,sans-serif; line-height:18px;"  class="reminder"><span style="color:#a6a6a6">Should you have any questions please feel free to e-mail us at<br>
    <a href="mailto:websupport@azmoves.com?subject=Question about this email message" title="Send us an email" target="_blank">websupport@azmoves.com</a></span> <span style="color:#c9c9c9;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">&nbsp;|&nbsp;&nbsp;
                              <unsubscribe style="color:#3ca7dd;text-decoration:none;"><strong><a href="mailto:websupport@azmoves.com?subject=Please remove me from this mailing list: Like us on Facebook - 7/25/2013" title="unsubscribe from this email list" target="_blank">Unsubscribe</a></strong></unsubscribe>
                      </span></p></td>



            </tr>
            </table>

              </td>
            </tr>
        </table>
<table width="625" height="40" border="0" align="center" cellpadding="0" cellspacing="0"  bgcolor="#e4e4e4" class="containerwrapto100" style="border-left: solid 10px #e4e4e4 !important">      
                  <tr>
                      <td width="624" align="right" valign="top" bgcolor="#e4e4e4"><img  width="615" height="40" border="0" src="https://www.insideazmoves.com/sites/default/files/user_files/library/public/Email/sidebar_shadow.png#3" style="display:block; width:615; height:40;" class="containerwrapto100">

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

                  </tr>
                </table>

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

    </body>
</html>
mrmarkham, 3 years ago

I don't know of any solution, but I feel your frustration! I've been struggling with this too - I managed to improve on my layout so it doesn't break quite as badly for those with 125% Windows zoom, but it's still not ideal.

It's especially frustrating because some computers default to 125%, so those users aren't even aware that they have any "abnormal" setting in place. FWIW, I've been asking around and so far it seems like most computers do default to 100% (thankfully) - but I have found a few (like my work computer) that defaulted to 125%.

Would love to hear if anyone has a solution for this issue!

Redferret, 3 years ago

try putting this in the head of your HTML, with any luck it'll set it to the standard PPI settings.

<!--[if gte mso 9]><xml>
  <o:PixelsPerInch>72</o:PixelsPerInch>
</xml><![endif]-->

Gmail app apologist
brandon-pines, 3 years ago

@mrmarkham Unfortunately the statistic may confirm that 100% is the norm but it is all dependant on your audience. I know I have a lot of 50+ on my list and they cannot see at 100%

@Redferret I do not see how that would help. The ppi for the two issue I ran into was 72 just the display was 125%. What is that code doing? Just targeting IE 9?

brandon-pines, 3 years ago

I just tried the code and unfortunately it did not work.

roshodgekiss roshodgekiss, 3 years ago

Hi Brandon, we've had this issue reported a few times earlier - notably, here and here. Unfortunately, we haven't found a definitive way to override user settings - they're really there to make things easier for recipients, not email designers.

I think your best bet is to feature as much white-space as possible in your design to accommodate the differences from display to display. In short, design defensively, as this may not be a solvable issue.


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

Hi Brandon, we've had this issue reported a few times earlier - notably, here and here. Unfortunately, we haven't found a definitive way to override user settings - they're really there to make things easier for recipients, not email designers.

I think your best bet is to feature as much white-space as possible in your design to accommodate the differences from display to display. In short, design defensively, as this may not be a solvable issue.

Well it is not the white space but rather % values breaking. I was hoping someone smarter than I could look over my code and suggest additional code.

Also, is there a tag that allows me to override the display: 125% value by forcing the email to remain at 100%?

Redferret, 3 years ago

Your code isn't the issue, Changing the display percentage in windows affects the DPI settings, There is a way to get my code above working, but I've found that to fix the issue for someone viewing at 125% breaks it for everyone at the default. :(

Unfortunately there's no silver bullet here but just like most Email designers disregard Lotus notes because of it's terrible rendering and tiny market share, you have to weigh up weather it's worth creating an incredibly basic design that works for everyone or creating a more appealing design that might not display correct for a small pool of recipients.


Gmail app apologist

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