What if you want the desktop layout in Gmail mobile? Take that Gmail!

It's usually the other way around but what if you are asked to display the desktop layout in the Gmail app? Unless you do some tricks, Gmail will display the stacked mobile responsive layout nowadays.

And that is a good thing! Remember those days when we were all wondering when Gmail will support responsive emails?Well, they are here. Anyway, back to our task. I will show you how to force the desktop layout in Gmail. To do that add min-width:100% !important in the head style. You also need an inner table like in the code below.

This is how I do it:

The CSS:

table {width:100% !important; background:#ffffff !important; min-width:100% !important;}

The HTML:

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
      <td style="border-collapse:collapse;">
         <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin-left:auto !important; margin-right:auto !important;" width="640" border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
               <td style="border-collapse: collapse;" width="20"></td>
               <td style="border-collapse: collapse;" width="600">
                  <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; min-width:600px" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
                     <tr>
                        <td>Here your awesome line!</td>
                     </tr>
                  </table>
               </td>
               <td style="border-collapse: collapse;" width="20"></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

This should do it. Let me know how it works for you.

Happy email coding! Your friend, the email snob.