title: CSS media queries not showing up in chrome inspector
body: <p>First, I have to say I already checked other SO questions regarding this issue (like <a href="https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working">this</a> and <a href="https://stackoverflow.com/questions/18207076/css-media-query-wont-work/18207189">this</a>), and I believe my problem is different than those issues, and this question is not a duplicate of those questions.</p>
  
  <p>I have a few media queries like the following in my CSS file:</p>
  
  <pre><code>@media only screen and (max-width: 767px) { /*css here*/}
  </code></pre>
  
  <p>When I check the chrome inspector, I can see that those CSS roles never apply to the desired elements. I tried to resize the screen in inspector mode, and still, those CSS roles never apply. Any idea about what could cause the problem here?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is the entire block of the CSS that I use. I'm using SCSS syntax and I can see that the generated CSS roles are totally fine and I get the correct roles for <code>filter-title-responsive</code> class.</p>
  
  <pre><code>.filter-panel-container {
    @extend %select-input-fix;
    @extend %date-input-fix;
    width: 100%;
    height: auto;
  
    .filter-header-container {
      height: 40px;
      width: 100%;
      border-radius: 5px 5px 0 0;
      background-color: $theme_athens_gray_color;
  
      padding-top: 10px;
      padding-bottom: 11px;
      padding-left: 16px;
  
      display: flex;
      flex-direction: row;
      justify-content: start;
  
      &amp; * {
        color: $theme_gulf_blue_color;
      }
  
      i {
        margin-top: 2px;
      }
  
      .filter-title {
        font-family: $Montserrat-font;
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
        margin-left: 5px;
      }
  
      .filter-title-responsive {
        font-size: 14px;
        margin-left: 0;
      }
  
      @media screen and (max-width: 1730px) {
        .filter-title-responsive {
          font-size: 12px;
        }
      }
  
      @media screen and (max-width: 1370px) {
        .filter-title-responsive {
          font-size: 10px;
        }
      }
  
      @media screen and (max-width: 1210px) {
        .filter-title-responsive {
          font-size: 7px;
        }
      }
  
      &amp;.filter-header-disable {
        border: 1px solid $theme_athens_gray_color;
        border-bottom: none;
        background-color: white;
        color: $theme_athens_gray_color;
      }
    }
  }
  </code></pre>