Hi All,

I need some help to debug an issue that I am facing with Microsoft Surface Tablets. Emails are viewed in the Outlook app and are rendering very narrow. Here is the html that I am using below. Any help on this is much appreciated!

<html xmlns="http://www.w3.org/1999/xhtml"><head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Booz Allen Hamilton MENA Newsletter</title>
      <style type="text/css">
         /* Client-specific Styles */
         #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
         body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
         /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
         .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
         #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
         img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
         a img {border:none;}
         .image_fix {display:block;}
         p {margin: 0px 0px !important;}
         .preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }

         table td {border-collapse: collapse;}
         table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
         /*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
         /*STYLES*/
         table[class=full] { width: 100%; clear: both; }

         /*################################################*/
         /*IPAD STYLES*/
         /*################################################*/
         @media only screen and (max-width: 640px) {
         a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #ffffff; /* or whatever your want */
         pointer-events: none;
         cursor: default;
         }
         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #ffffff !important;
         pointer-events: auto;
         cursor: default;
         }
         table[class=devicewidth] {width: 440px!important;text-align:center!important;}
         table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
         table[class="sthide"]{display: none!important;}
         img[class="bigimage"]{width: 420px!important;height:219px!important;}
         img[class="col2img"]{width: 420px!important;height:258px!important;}
         img[class="image-banner"]{width: 440px!important;height:106px!important;}
         td[class="menu"]{display: none !important; padding: 0 0 10px 0 !important;}
         td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}
         img[class="logo"]{padding:0!important;margin: 0 auto !important;}

         }

             /*##############################################*/
         /*IPHONE 6 PLUS STYLES*/
         /*##############################################*/ 
          @media screen and (max-device-width: 414px) and (max-device-height: 776px) { /* Insert styles here */ }
         a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #ffffff; /* or whatever your want */
         pointer-events: none;
         cursor: default;
         }
         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #ffffff !important; 
         pointer-events: auto;
         cursor: default;
         }
         }
         /*##############################################*/
         /*IPHONE STYLES*/
         /*##############################################*/
         @media only screen and (max-width: 480px) {
         a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #ffffff; /* or whatever your want */
         pointer-events: none;
         cursor: default;
         }
         .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #ffffff !important; 
         pointer-events: auto;
         cursor: default;
         }
         table[class=devicewidth] {width: 280px!important;text-align:center!important;}
         table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
         table[class="sthide"]{display: none!important;}
         img[class="bigimage"]{width: 260px!important;height:136px!important;}
         img[class="col2img"]{width: 260px!important;height:160px!important;}
         img[class="image-banner"]{width: 280px!important;height:68px!important;}

         }
      </style>


   </head>
<body>
    <div class="block">
   <!-- Start of preheader -->
   <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader">
      <tbody>
         <tr>
            <td width="100%" class="">
               <table width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                  <tbody>
                     <!-- Spacing -->
                     <tr>
                        <td><span class="preheader" style="display: none !important; visibility: hidden; font-size:12px; text-align:center; opacity: 0; color: transparent; height: 0; width: 0;"><span class="eloquaemail">FirstName</span>, will you subscribe to our quarterly e-newsletter?
                        </span></td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- End of preheader -->
</div>
<div class="block">
   <!-- start of header -->
   <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header">
      <tbody>
         <tr>
            <td class="">
               <table width="580" bgcolor="#003366" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" hlitebg="edit" shadow="edit">
                  <tbody>
                     <tr>
                        <td class="">
                           <!-- logo -->
                           <table width="280" cellpadding="0" cellspacing="0" border="0" align="left" class="devicewidth">
                              <tbody>
                                 <tr>
                                    <td valign="middle" width="270" style="padding: 10px 0 10px 20px;" class="logo">
                                       <div class="imgpop">
                                          <img src="http://images.info.bah.com/EloquaImages/clients/BoozAllenHamiltonInc/{e021c80e-a1ec-4552-aa39-8e76e33cef7c}_logo.png" alt="Booz | Allen | Hamilton" style="color: #ffffff; font-size: 24px;" border="0" style="display:block; border:none; outline:none; text-decoration:none;" st-image="edit" class="logo">
                                       </div>
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                           <!-- End of logo -->
                           <!-- menu -->
                           <table width="280" cellpadding="0" cellspacing="0" border="0" align="right" class="devicewidth">
                              <tbody>
                                 <tr>
                                    <td width="300" valign="middle" style="font-family:'Roboto Slab', Palatino, Palladio, serif;  font-size: 14px; color: #ffffff;line-height: 34px; padding:10px 10px;" align="right" class="menu" st-content="menu">
                                    </td>
                                    <td width="20" class=""></td>
                                 </tr>
                              </tbody>
                           </table>
                           <!-- End of Menu -->
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- end of header -->
</div>
<div class="block">
   <!-- image + text -->
   <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="bigimage">
      <tbody>
         <tr>
            <td class="">
               <table bgcolor="#ffffff" width="580" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth" modulebg="edit">
                  <tbody>
                     <tr>
                        <td width="100%" height="20"></td>
                     </tr>
                     <tr>
                        <td class="">
                           <table width="540" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidthinner">
                              <tbody>
                                 <tr>
                                    <!-- start of image -->
                                    <td align="center">
                                       <a target="_blank"><img width="540" border="0" height="282" alt="Ready For What's Next" style="display:block; border:none; outline:none; text-decoration:none;" src="http://images.info.bah.com/EloquaImages/clients/BoozAllenHamiltonInc/{0778f333-bc4b-4100-9c29-06dc43fb1d06}_pic.jpg" class="bigimage"></a>
                                    </td>
                                 </tr>
                                 <!-- end of image -->
                                 <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="20" class=""></td>
                                 </tr>
                                 <!-- Spacing -->
                                 <!-- content -->
                                 <tr>
                                    <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;" st-content="rightimage-paragraph" class="">
                                       Dear <span class="eloquaemail">FirstName</span>,
                                    </td>
                                 </tr>
                                 <tr>
                                    <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left;line-height: 24px;" st-content="rightimage-paragraph" class="">
                                       We say that information is knowledge. With today’s digital means and ubiquity of media, selective information sourcing and information formats become as crucial as the information itself, to capture the knowledge you require, in the little time you have.</td></tr>

                                       <tr>
                                    <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left; padding-top: 10px; line-height: 24px;" st-content="rightimage-paragraph">
                                      This is why I personally invite you to subscribe to Booz Allen Hamilton’s quarterly e-newsletter, <strong>Ready for What's Next</strong>.</td></tr>
                                      <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="20"></td>
                                 </tr>
                                 <!-- Spacing -->
                                      <!-- button -->
                                 <tr>
                                    <td>
                                       <table height="30" align="left" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
                                                                  <tbody>
                                                                     <tr>
                                                                        <td width="auto" align="center" valign="middle" height="44" style=" background-color:#5f89d4; border-top-left-radius:4px; border-bottom-left-radius:4px;border-top-right-radius:4px; border-bottom-right-radius:4px; background-clip: padding-box;font-size:13px; font-family:Helvetica, arial, sans-serif; text-align:center;  color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px;">

                                                                           <span style="color: #ffffff; font-weight: 300;">
                                                                              <a style="color: #ffffff; text-align:center;text-decoration: none;" href="
http://app.info.bah.com/e/f2.aspx?elqFormName=MENABlindSubscribe&elqSiteID=2082&emailAddress=<span class=eloquaemail>EmailAddress</span>&elq=~~eloqua..type--emailfield..syntax--recipientid~~&elqCampaignId=~~eloqua..type--campaign..campaignid--0..fieldname--id~~&elqaid=~~eloqua..type--emailfield..syntax--elqassetId~~&elqat=~~eloqua..type--emailfield..syntax--elqassetType~~&elqTrackId=f11ac2e685da4656a32d92f544fe1f4b">Subscribe Now</a>
                                                                           </span>
                                                                        </td>
                                                                     </tr>
                                                                  </tbody>
                                                               </table>
                                    </td>
                                 </tr>
                                 <!-- /button -->
                                 <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="20"></td>
                                 </tr>
                                 <!-- Spacing -->
       <tr>
            <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left; padding-top: 10px; line-height: 24px;" st-content="rightimage-paragraph"> 
        Every digital issue of <strong>Ready for What's Next</strong> will offer you thought-provoking insights and engaging content on a specific topic, delving deep into its intricacies, and bringing to the surface the necessary resources to help you answer some of the questions you face every day in your industry.</td></tr>
        <tr>
          <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left; padding-top: 10px; line-height: 24px;" st-content="rightimage-paragraph">Booz Allen Hamilton has been at the forefront of strategy, technology, and engineering for more than 100 years. Booz Allen partners with public and private sector clients across the globe to solve their most difficult challenges. To learn more, visit <a href="http://www.boozallen.com?elqTrack=true&elqTrackId=e72fa1e3ce5f4be39dc01a6e644416d1&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" target="_blank" style="color: #333333">www.boozallen.com</a>. (NYSE: BAH)</td></tr>
        <tr>
          <td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left; padding-top: 10px; line-height: 24px;" st-content="rightimage-paragraph">We’re honored to stay in touch with you and hope that you will enjoy the experience of <strong>Ready for What's Next</strong>.</td></tr>
              <tr><td style="font-family: Helvetica, arial, sans-serif; font-size: 13px; color: #333333; text-align:left; padding-top: 10px; line-height: 24px;" st-content="rightimage-paragraph">
        Best Regards,<br>
        Ramez Shehadi<br>
Managing Director, MENA Region<br>
Booz Allen Hamilton
                                    </td>
                                 </tr></tbody></table></td></tr>
                                 <!-- end of content -->
                                 <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="10"></td>
                                 </tr>
                                 <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="20"></td>
                                 </tr>
                                 <!-- Spacing -->



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






</tbody></table></div>
<div class="block">
   <!-- fulltext -->
   <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="fulltext">
      <tbody>
         <tr>
            <td>
               <table bgcolor="#003366" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
                  <tbody>
                     <!-- Spacing -->
                     <tr>
                        <td width="100%" height="10"></td>
                     </tr>
                     <!-- Spacing -->
                     <tr>
                        <td>
                           <table width="540" align="center" cellpadding="0" cellspacing="0" border="0" class="devicewidthinner">
                              <!-- menu -->
                              <tbody>
                                 <tr>
                                    <td width="540" valign="middle" align="center" st-content="menu" class="menu" style="font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #ffffff;line-height: 10px; padding:5px 5px;">
                                       <a href="https://www.facebook.com/boozallen?elqTrack=true&elqTrackId=b1dcab224cdc4504943aed0bfc978505&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" target="blank"><img src="http://images.info.bah.com/EloquaImages/clients/BoozAllenHamiltonInc/{bd0ea6c4-ebc6-45ec-b220-9f77b6c8166c}_white-facebook54x54.png" width="25" height="25" alt="FaceBook" border="0"></a>

                                                                              <a href="https://twitter.com/BoozAllen?elqTrack=true&elqTrackId=ad2ab784d6964d91831f9eddc6b1a2e0&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" target="blank"><img src="http://images.info.bah.com/EloquaImages/clients/BoozAllenHamiltonInc/{4369eb0f-c666-4aeb-8c4e-f6a82f90cea2}_white-twitter54x54.png" width="25" height="25" alt="Twitter" border="0" class=""></a>


<a href="http://www.linkedin.com/company/booz-allen-hamilton?elqTrackId=329c7c405ff54131829b8fa82486bfcc&elq=~~eloqua..type--emailfield..syntax--recipientid~~&elqCampaignId=~~eloqua..type--campaign..campaignid--0..fieldname--id~~&elqaid=~~eloqua..type--emailfield..syntax--elqassetId~~&elqat=~~eloqua..type--emailfield..syntax--elqassetType~~" target="blank"><img src="http://images.info.bah.com/EloquaImages/clients/BoozAllenHamiltonInc/{f48ae9d5-b2d1-4b42-8a6c-0980e95d835e}_white-linkedin54x54.png" width="25" height="25" alt="Linkedin" border="0"></a>
                                    </td>
                                    <td width="1" class=""></td>
                                 </tr>
                              </tbody>
                           <!-- End of Menu -->
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- end of fulltext -->
</div>
<div class="block">
  <!-- Start of footer social -->
   <!-- fulltext -->
   <table width="100%" bgcolor="#f6f4f5" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="fulltext">
      <tbody>
         <tr>
            <td>
               <table bgcolor="#003366" width="580" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" modulebg="edit">
                  <tbody>
                     <!-- Spacing -->
                     <tr>
                        <td width="100%" height="2"></td>
                     </tr>
                     <!-- Spacing -->
                     <tr><td style="font-family: Helvetica, arial, sans-serif; font-size: 10px; color: #ffffff; text-align:left; line-height: 16px;" class="devicewidth"><p align="center" class=""><strong>© Copyright 2015 Booz Allen Hamilton Inc. All Rights Reserved.</strong></p>
                                </td>
                              </tr><!-- Spacing -->
                     <tr>
                        <td width="100%" height="15"></td>
                     </tr>
                     <!-- Spacing -->
                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>




<!-- /End of footer social-->
</div>

</body></html>