title: How to set breakpoints for different screen widths and heights
body: <blockquote>
    <p>PS: I'm very new to CSS and I'm trying my head around to work on a
    mobile responsive UI, so please spare me if anything silly!</p>
  </blockquote>
  
  <p>I have two devices with their widths and widths set as <code>360X640</code> and <code>375X667</code>. I'm trying to write the css for these using <code>@media</code> but unable to make it work. The <strong>breakpoints</strong> which I set seems to be not working properly. Below is my code</p>
  
  <pre><code>@media(max-width: 360px){
    .un-progress{
      height: 10px !important; 
      margin-top: -0.325em;
      margin-left: -2.75em;
      margin-right: 1.5em;
    }
    .finished_time{
      margin-left: 6.25em;
      margin-top: -0.8em
    }
    .left_time{
      margin-left: 22.0em;
      margin-top: -2.5em;
    }
  }
  
  
  @media (min-width: 361px) and (max-width: 375px){
    .un-progress{
      height: 10px !important; 
      margin-top: -0.325em;
      margin-left: -2.75em;
      margin-right: 1.5em;
    }
    .finished_time{
      margin-left: 6.25em;
      margin-top: -0.8em
    }
    .left_time{
      margin-left: 22.0em;
      margin-top: -2.5em;
    }
  }
  }
  </code></pre>