Responsive Mobile Design for Gmail App

Question

Trying to just make the code to be mobile friendly based on only Gmail Mobile. So no other media queries are needed since it doesn't work for Gmail. Please do help me as I am new and very confused by looking at the the Gmail solutions. It works just fine in desktop but not in mobile Outline CSS doesnt work for gmail as well. Only 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 the 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>

Answer 1

I would comment this as it's not a direct answer but I don't have enough rep...

Since media queries aren't supported on the gmail app it's a pretty in depth problem to tackle. Using this method may involve re-building your email but this tutorial is incredibly helpful:

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