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:
Comments
Post a Comment