title: Responsive Outlook mail footer with CSS
body: <p>To create a <em><strong>responsive</strong></em> html signature, I tried the infamous <code>&lt;style scoped&gt;</code> tag. As far as I understood there's a conflict with @media queries. Is there a better way to achieve this in a way I can use it in MS Outlook client, preferably both on PC and smartphone?</p>
  <p>Here's a reduced version of what I have:</p>
  <pre><code>&lt;style scoped&gt;
    #containter {
      width: 100%;
      height: 250px;
    }
    #firm-contact {
      width: 35%;
      float: left;
    }
    #firm-links {
      width: 290px;
      float: left;
    }
    #firm-logo {
      margin: 2% 4% 1% 4%;
      width: 165px;
      float: left;
    }
  
    /* screenwitdh &lt;= 980px */
    @media screen and (max-width: 980px) {
      #containter {
        height: 580px;
      }
      #firm-contact {
        width: 41%;
      }
      #firm-links {
        width: 41%;
        float: right;
      }
      #firm-logo {
        clear: both;
        width: auto;
        float: none;
      }
    }
  
    /* screenwitdh &lt;= 600px */
    @media screen and (max-width: 600px) {
      #containter {
        height: 680px;
      }
      ...
    }
  &lt;/style&gt;
  &lt;div id=&quot;footer&quot;&gt;
    &lt;div id=&quot;display&quot;&gt;
      &lt;div id=&quot;containter&quot;&gt;
        &lt;div id=&quot;firm-contact&quot;&gt;
          &lt;p&gt;Streer&lt;/p&gt;
          &lt;p&gt;Place&lt;/p&gt;
          &lt;p&gt;+tel&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id=&quot;firm-links&quot;&gt;
        &lt;p&gt;&lt;span&gt;Links&lt;/span&gt;&lt;&lt;/p&gt;
          &lt;p&gt;&lt;&lt;a href=&quot;#&quot;&gt;Something&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Other&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id=&quot;firm-logo&quot;&gt;
         &lt;div width=&quot;250&quot; heigth=&quot;250&quot;&gt;
           &lt;img class=&quot;img-fluid&quot; src=&quot;img/some.png&quot; alt=&quot;Logo&quot; width=&quot;75%&quot;&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- containter --&gt;
    &lt;/div&gt; &lt;!-- display --&gt;
  &lt;/div&gt; &lt;!-- footer --&gt;
  </code></pre>