Hello everybody,

I'm experiencing a weird behaviour with Yahoo Mail app (both for iOS and Android): I have a 3 column layout. The columns stack correctly but when I test it on this client are not 100% wide even if there's the right class and media query (both in head and body).

Any help please?

Thanks

Here's the code:

> <!DOCTYPE html>
> <html>
> <head>
>     <title></title>
>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>     <meta name="viewport" content="width=device-width, initial-scale=1">
>     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
>     <style type="text/css">
>         /* CLIENT-SPECIFIC STYLES */
>         body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
>         table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
>         img { -ms-interpolation-mode: bicubic; }
>         /* RESET STYLES */
>         img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
>         table { border-collapse: collapse !important; }
>         body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
>         /* iOS BLUE LINKS */
>         a[x-apple-data-detectors] {
>             color: inherit !important;
>             text-decoration: none !important;
>             font-size: inherit !important;
>             font-family: inherit !important;
>             font-weight: inherit !important;
>             line-height: inherit !important;
>         }
>         /* MEDIA QUERIES */
>         @media screen and (max-width: 620px) {
>             .mobile-hide {
>                 display: none!important;
>             }
>             .mobile-center {
>                 text-align: center!important;
>             }
>             .width-full {
>                 max-width: 100%!important;
>             }
>             .pdng {
>                 padding-bottom: 10px!important;
>             }
>             .side-pdng {
>                 padding-right: 15px!important; padding-left: 15px!important;
>             }
>         }
>         /* ANDROID CENTER FIX */
>         div[style*="margin: 16px 0;"] { margin: 0 !important; }
>     </style>
> </head>
> <body style="margin: 0 !important; padding: 0 !important; background-color: #ececec;" bgcolor="#ececec">
>     <table border="0" cellpadding="0" cellspacing="0" width="100%">
>         <tr>
>             <td align="center" style="background-color: #ececec;" bgcolor="#ececec">
> <!--[if (gte mso 9)|(IE)]>
> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
> <tr>
> <td align="center" valign="top" width="600">
>     <![endif]-->
>     <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
>         <tr>
>             <td align="center" style="padding-top: 10px; padding-right: 35px; padding-bottom: 10px; padding-left: 35px; background-color: #ffffff;" bgcolor="#ffffff" valign="top" width="100%" class="side-pdng">
> <!--[if (gte mso 9)|(IE)]>
> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
> <tr>
> <td align="center" valign="top" width="600">
>     <![endif]-->
>     <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:530px;" class="width-full">
>         <tr>
>             <td align="center" width="100%" valign="top" style="font-size:0;">
> <!--[if (gte mso 9)|(IE)]>
> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
> <tr>
> <td align="left" valign="top" width="175">
>     <![endif]-->
>     <div style="display:inline-block; max-width:33.3333%; min-width:165px; vertical-align:top; width:100%; padding-bottom: 10px;" class="width-full">
>         <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:165px; border: 1px solid #ebebeb;" class="width-full">
>             <tr>
>                 <td align="left" valign="top" bgcolor="#ebebeb" style="background: #ebebeb; font-family: 'Open Sans',Tahoma,sans-serif; font-size: 13px; line-height: 19px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;">
>                     <p style="font-size: 13px; font-weight: bold; line-height: 19px; color: #655e5d; margin: 0;">
>                         Lorem ipsum
>                     </p>
>                 </td>
>             </tr>
>             <tr>
>                 <td align="left" valign="top" bgcolor="#ffffff" style="background: #ffffff; font-family: 'Open Sans',Tahoma,sans-serif; font-size: 13px; line-height: 19px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;">
>                     <p style="font-size: 13px; font-weight: normal; line-height: 19px; color: #655e5d; margin: 0;">
>                         Lorem ipsum
>                     </p>
> 
>                 </td>
>             </tr>
>         </table>
>     </div>
> <!--[if (gte mso 9)|(IE)]>
> </td>
> <td width="10" style="font-size: 1px;">&nbsp;</td>
> <td align="left" valign="top" width="175">
>     <![endif]-->
>     <div style="display:inline-block; max-width:33.3333%; min-width:165px; vertical-align:top; width:100%; padding-bottom: 10px;" class="width-full">
> 
>         <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:165px; border: 1px solid #ebebeb;" class="width-full">
>             <tr>
>                 <td align="left" valign="top" bgcolor="#ebebeb" style="background: #ebebeb; font-family: 'Open Sans',Tahoma,sans-serif; font-size: 13px; line-height: 19px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;">
>                     <p style="font-size: 13px; font-weight: bold; line-height: 19px; color: #655e5d; margin: 0;">
>                         Lorem ipsum
>                     </p>
>                 </td>
>             </tr>
>             <tr>
>                 <td align="left" valign="top" bgcolor="#ffffff" style="background: #ffffff; font-family: 'Open Sans',Tahoma,sans-serif; font-size: 13px; line-height: 19px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;">
>                     <p style="font-size: 13px; font-weight: normal; line-height: 19px; color: #655e5d; margin: 0;">
>                         Lorem ipsum
>                     </p>
>                 </td>
>             </tr>
>         </table>
>     </div>
> <!--[if (gte mso 9)|(IE)]>
> </td>
> <td width="10" style="font-size: 1px;">&nbsp;</td>
> <td align="left" valign="top" width="175">
>     <![endif]-->
>     <div style="display:inline-block; max-width:33.3333%; min-width:165px; vertical-align:top; width:100%; padding-bottom: 10px;" class="width-full">
> 
>         <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:165px; border: 1px solid #ebebeb;" class="width-full">
>             <tr>
>                 <td align="left" valign="top" bgcolor="#ebebeb" style="background: #ebebeb; font-family: 'Open Sans',Tahoma,sans-serif; font-size: 13px; line-height: 19px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;">
>                     <p style="font-size: 13px; font-weight: bold; line-height: 19px; color: #655e5d; margin: 0;">
>                         Lorem ipsum
>                     </p>
> 
>                 </td>
>             </tr>
>             <tr>
>                 <td align="left" valign="top" bgcolor="#ffffff" style="background: #ffffff; font-family: 'Open Sans',Tahoma,sans-serif; font-size: 13px; line-height: 19px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;">
>                     <p style="font-size: 13px; font-weight: normal; line-height: 19px; color: #655e5d; margin: 0;">
>                         Lorem ipsum
>                     </p>
> 
>                 </td>
>             </tr>
>         </table>
>     </div>
> <!--[if (gte mso 9)|(IE)]>
> </td>
> </tr>
> </table>
> <![endif]-->
> </td>
> </tr>
> </table>
> <!--[if (gte mso 9)|(IE)]>
> </td>
> </tr>
> </table>
> <![endif]-->
> </td>
> </tr>
> </table>
> <!--[if (gte mso 9)|(IE)]>
> </td>
> </tr>
> </table>
> <![endif]-->
> </td>
> </tr>
> </table>
> <style type="text/css">
>     /* MEDIA QUERIES */
>     @media screen and (max-width: 620px) {
>         .width-full {
>             max-width: 100%!important;
>         }  
>         .side-pdng {
>             padding-right: 15px!important; padding-left: 15px!important;
>         }
>     }
> </style>
> </body>
> </html>