title: How to make responsive signature mail
body: <p>I got problem with my email signature. It's not quite responsive. Responsive just for window resize but not for tool's developer chrome</p>
  
  <p>here's files from dropbox
  <a href="http://www.dropbox.com/sh/z09rlwphzdbzq5c/AABZu1NZCPZ_EEFOUzeAX3JZa?dl=0" rel="nofollow noreferrer">www.dropbox.com/sh/z09rlwphzdbzq5c/AABZu1NZCPZ_EEFOUzeAX3JZa?dl=0</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background{
      background: url("https://image.ibb.co/cse3Jb/bg_car.png") center no-repeat;
     }
  
     div[class="wide-version-of-table"] { display:block; }
     div[class="narrow-version-of-table"] { display:none; }
     body { padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none }
  
     @media only screen and (max-device-width: 500px), only screen and (max-width:500px) /* The maximum width for the mobile device version. */
     {
      div[class="wide-version-of-table"] { display:none; }
      div[class="narrow-version-of-table"] { display:block; }
      span[class='content-width-img'] img { width: 100% !important; height: auto !important; max-width: 480px !important; }
     }
     @media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {
      table[class='w320'] {
       width: 100% !important;
      }
      th[class='column'] { float: left !important; width: 100% !important; display: block !important; }
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"&gt;
    &lt;title&gt;CarSPA Email&lt;/title&gt;
   &lt;/head&gt;
  
   &lt;body class="body" style="padding:0 !important; margin:0 !important; display:block !important; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none"&gt;
   &lt;div class="wide-version-of-table"&gt;
   &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
     &lt;th valign="top" align="center"&gt;
      &lt;table width="800" border="0" cellspacing="0" cellpadding="0" class="w320"&gt;
       &lt;tr&gt;
        &lt;th&gt;
         &lt;div &gt;
          &lt;table cellpadding="0" cellspacing="0" border="0"  style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%"&gt;
            &lt;tr&gt;
             &lt;td class="column"&gt;
               &lt;img src="https://image.ibb.co/cosCBw/zdjecie_01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/&gt;
             &lt;/td&gt;
             &lt;td class="column" width="90%"  valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;"&gt;
                &lt;p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;"&gt;
                Karol Nowak&lt;br/&gt;
                &lt;span style="font-weight: normal;"&gt;właściciel&lt;/span&gt;&lt;/p&gt;
                &lt;p style="padding-top: 12px;font-size:15px;"&gt;&lt;span style="font-weight: bold"&gt;cars warsaw&lt;/span&gt;&lt;br/&gt;
               tel.kom. +48 555 555 555&lt;br/&gt;
               email: emailadres&lt;br/&gt;
                &lt;/p&gt;
                &lt;p style="padding-top: 12px;font-size:15px;"&gt;
                ul. Frontzka 2&lt;br/&gt;
                77-577 Poland
                &lt;/p&gt;
             &lt;/td&gt;
             &lt;td class="column"align="right" style="position: relative; padding-right: 5px;"&gt;
               &lt;!--&lt;img src="bg-car.png" alt="CarSpa - email"/&gt;--&gt;
              &lt;span&gt;&lt;a href="otagowany link"&gt;&lt;img src="https://image.ibb.co/cNkcdb/carspa_logo.png" alt="CarSpa - logo" style="margin-bottom: 13px;margin-top: 25px;"/&gt;&lt;/a&gt;
              &lt;/span&gt;
              &lt;span&gt;&lt;a href=""&gt;&lt;img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Facebook" style=""/&gt;&lt;/a&gt;
              &lt;/span&gt;
              &lt;span&gt;&lt;a href=""&gt;&lt;img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/&gt;&lt;/a&gt;
              &lt;/span&gt;
              &lt;span&gt;&lt;a href=""&gt;&lt;img src="https://image.ibb.co/jD0XBw/icon_fb.png" alt="CarSpa - Youtube" style="padding-right: 0px"/&gt;&lt;/a&gt;
              &lt;/span&gt;
             &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
         &lt;/div&gt;
        &lt;/th&gt;
       &lt;/tr&gt;
      &lt;/table&gt;
     &lt;/th&gt;
    &lt;/tr&gt;
   &lt;/table&gt;
   &lt;/div&gt;
  
   &lt;div class="narrow-version-of-table"&gt;
    &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
     &lt;tr&gt;
      &lt;th valign="top" align="center"&gt;
       &lt;table width="800" border="0" cellspacing="0" cellpadding="0" class="w320"&gt;
        &lt;tr&gt;
         &lt;th&gt;
          &lt;div &gt;
           &lt;table cellpadding="0" cellspacing="0" border="0"  style="font-size:12px; font-family: Arial; line-height: 17px;background: url(bg-car.png) right no-repeat;" width="100%"&gt;
            &lt;tr&gt;
             &lt;td class="column"&gt;
              &lt;img src="zdjecie-01.png" style="padding-left: 5px;" alt="CarSPA - Właściciel"/&gt;
             &lt;/td&gt;
             &lt;td class="column" width="90%"  valign="top" style="padding-top: 30px;padding-bottom: 10px;padding-left: 20px;"&gt;
              &lt;p style="font-size:15px; font-weight: bold; color:#454545; margin: 0px; margin-bottom: 10px;"&gt;
               Piotr Zawisza&lt;br/&gt;
               &lt;span style="font-weight: normal;"&gt;właściciel&lt;/span&gt;&lt;/p&gt;
              &lt;p style="padding-top: 12px;font-size:15px;"&gt;&lt;span style="font-weight: bold"&gt;CarSPA Gdynia&lt;/span&gt;&lt;br/&gt;
               tel.kom. +48 505 505 999&lt;br/&gt;
               email: piotr.zawisza@car-spa.pl&lt;br/&gt;
              &lt;/p&gt;
              &lt;p style="padding-top: 12px;font-size:15px;"&gt;
               ul. Stryjska 11&lt;br/&gt;
               81-507 Gdynia
              &lt;/p&gt;
             &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
             &lt;td class="column"align="right" style="position: relative;"&gt;
              &lt;!--&lt;img src="bg-car.png" alt="CarSpa - email"/&gt;--&gt;
              &lt;span style="margin-left: 100%;"&gt;
               &lt;a href=""&gt;&lt;img src="carspa-logo.png" alt="CarSpa - Logo" style="margin-bottom: 13px;margin-top: 25px;"/&gt;
               &lt;/a&gt;
               &lt;span style="margin-left: 100%"&gt;
                &lt;a href=""&gt;&lt;img src="icon-fb.png" alt="CarSpa - Facebook" style=""/&gt;&lt;/a&gt;
                &lt;a href=""&gt;&lt;img src="icon-ig.png" alt="CarSpa - Instagram" style="padding: 0px 10px;"/&gt;&lt;/a&gt;
                &lt;a href=""&gt;&lt;img src="icon-yt.png" alt="CarSpa - Youtube" style="padding-right: 0px"/&gt;&lt;/a&gt;
               &lt;/span&gt;
              &lt;/span&gt;
             &lt;/td&gt;
            &lt;/tr&gt;
           &lt;/table&gt;
          &lt;/div&gt;
         &lt;/th&gt;
        &lt;/tr&gt;
       &lt;/table&gt;
      &lt;/th&gt;
     &lt;/tr&gt;
    &lt;/table&gt;
   &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/zaraki12345/pen/RxOoZe" rel="nofollow noreferrer">https://codepen.io/zaraki12345/pen/RxOoZe</a></p>