CSS media queries not showing up in chrome inspector

Question

First, I have to say I already checked other SO questions regarding this issue (like this and this), and I believe my problem is different than those issues, and this question is not a duplicate of those questions.

I have a few media queries like the following in my CSS file:

@media only screen and (max-width: 767px) { /*css here*/}

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?

Edit

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 filter-title-responsive class.

.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;

    & * {
      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;
      }
    }

    &.filter-header-disable {
      border: 1px solid $theme_athens_gray_color;
      border-bottom: none;
      background-color: white;
      color: $theme_athens_gray_color;
    }
  }
}

Answer 1

Add: <meta name="viewport" content="width=device-width, initial-scale=1.0">

A viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.