title: How to resize html, css on mobile?
body: <p>I'm creating a countdown to insert into my site. Everything works well on my computer, but when I enter from a mobile device it looks weird (It's displayed on two lines instead of one) and I'm not able to resize it. </p>
  
  <h2>So far the code I have is:</h2>
  
  <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>    body{
        text-align: left;
        background: #ffffff;
        font-family: sans-serif;
        font-weight: 100;
      }
      
      h1.customclass{
        color: #032g71;
        font-weight: 50;
        font-size: 40px;
        margin: 0px 0px 10px;
      }
      
      #clockdiv{
       font-family: sans-serif;
       color: #fff;
       display: inline-block;
       font-weight: 100;
       text-align: center;
       font-size: 30px;
      }
      
      #clockdiv &gt; div{
       padding: 10px;
       border-radius: 3px;
       background: #055678;
       display: inline-block;
      }
      
      #clockdiv div &gt; span{
       padding: 0px;
       border-radius: 3px;
       background: #055678;
       display: inline-block;
      }
      
      .smalltext{
       padding-top: 5px;
       font-size: 16px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h1 class="customclass"&gt;TEST COUNTDOWN&lt;/h1&gt;
      &lt;div id="clockdiv"&gt;
        &lt;div&gt;
          &lt;span class="days"&gt;&lt;/span&gt;
          &lt;div class="smalltext"&gt;Days&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;span class="hours"&gt;&lt;/span&gt;
          &lt;div class="smalltext"&gt;Hours&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;span class="minutes"&gt;&lt;/span&gt;
          &lt;div class="smalltext"&gt;Minutes&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;span class="seconds"&gt;&lt;/span&gt;
          &lt;div class="smalltext"&gt;Seconds&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm thinking to use something like,</p>
  
  <pre><code>@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  </code></pre>
  
  <p>but how can I apply it to my case?
  Is there a way to resize in my case #clockdiv only when someone enter from a mobile device?</p>
  
  <p>Thanks a lot for your help!!!</p>