html - Responsive Mobile Design for Gmail App -


trying make code mobile friendly based on gmail mobile. no other media queries needed since doesn't work gmail. please me new , confused looking @ the gmail solutions. works fine in desktop not in mobile outline css doesnt work gmail well. inline css

<table cellpadding="0" cellspacing="0" class="container-table" style="margin:0; padding:0;border:0;width:100%; max-width:800px;">   <tr>     <td> $container1       <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0;min-width:100%;">         <tr>           <td width="450"><div id="minicontainer1" style="padding: 5px 0 0 20px; height:80px;line-height:50%;box-sizing:border-box;">               <p class="font1" style="font-family: helvetica; font-size:11pt;font-weight:bold; color:black;"> name of person </p>               <p class="font2" style="font-family: helvetica; font-size:9.5pt; color:black;"> web developer </p>               <p class="font2" style="font-family: helvetica; font-size:9.5pt; color:black;"> phone number </p>             </div>             <div id="minicontainer2" style="  padding:0 0 0 20px; margin-top:-10px; line-height:50%;box-sizing:border-box;">               <p class="font1 diffsize" style="font-family: helvetica; font-size:8pt; font-weight:bold; color:black;"> $company </p>               <div class="font2 diffsize" style="font-family: helvetica; font-size:8pt; color:black; line-height: 12px;">                 <p> $address. </p>                 <p> phone : <span id="special" style="color: #0000ee !important; text-decoration: underline;"> $telno </span> | fax :<span id="special" style="color: #0000ee !important; text-decoration: underline;"> $faxno </span> </p>               </div>             </div></td>           <td width="220" align="center"> $logo </td>           <td width="110" align="center"> $imgshow </td>         </tr>       </table>       $royalty       <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0; min-width:100%;">         <tr>           <td><div id="minicontainer4" style="padding:15px 0 0 20px; width:92%; box-sizing:border-box;">               <p class="font3" style=" font-family: helvetica; font-size:6pt; font-weight:lighter; color:black; letter-spacing:0.25px; text-align:center;"> prohibited email.</p>             </div></td>         </tr>       </table>       <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0; min-width:100%;">         <tr>           <td width="800"><div id="minicontainer5" style="height:40px; background-color: #ebf2f0; margin-top:15px; padding:4px 0 0 70px;">               <div id="box2" style="margin:0 auto; text-align:center; width:500px; box-sizing:border-box;">                 <ul style="list-style:none; margin:5px;">                   <li style="float:left; padding: 0 10px; font-family: helvetica; font-size:9.5pt;color:black; margin:5px 0 0 10px;">website : $web </li>                   <li style="float:left; padding: 0 10px; margin-left:0px"> <a href="https://www.facebook.com" target="_blank"> <img src="email_signature/images/facebook.png"> </a> </li>                   <li style="float:left; padding: 0 10px; margin-left:0px"> <a href="https://www.twitter.com/" target="_blank"> <img src="email_signature/images/twitter.png"> </a> </li>                   <li style="float:left; padding: 0 10px; margin-left:0px"> <a href="https://www.plus.google.com/" target="_blank"> <img src="email_signature/images/googleplus.png"> </a> </li>                 </ul>               </div>               <div class="clear" style="clear:both;"> </div>             </div></td>         </tr>       </table>       <table cellpadding="0" cellspacing="0" style="margin:0; padding:0;border:0;min-width:100%;">         <tr>           <td width="800"><div id="minicontainer6" style=" padding-top:5px; text-align: center; box-sizing:border-box;">               <p class="font2" style="font-size:5.5pt; font-family: helvetica; color:black;"> comapny limited </p>             </div></td>         </tr>       </table>       </div></td>   </tr> </table> 

i comment it's not direct answer don't have enough rep...

since media queries aren't supported on gmail app it's pretty in depth problem tackle. using method may involve re-building email tutorial incredibly helpful:

http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -