CODEWITHSUNDEEP
csssassmedia-queries
Hossein Rashno
Hossein Rashno

Reputation: 3469

CSS media queries not showing up in chrome inspector

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

Upvotes: 2

Views: 5086

Answers (5)

Joseph
Joseph

Reputation: 5160

I had a different workaround that others might find helpful.

My media query was specifically @media (width: 1355px) and (height: 384px) { }. (I need to support specific screen resolutions and this was just one of them)

When I forced the dev tools to that resolution, the media queries would not be selected.

My problem was with Windows 10's Scale and layout settings (the Change the size of text, apps, and other items dropdown).

My resolution is set to 3840x2160 and because of the 4K monitor, I updated the Scale setting to 150% (which was recommended).

If I changed the scale back down to 100%, the media query was selected just fine.

Upvotes: 0

Rohit Rohra
Rohit Rohra

Reputation: 41

remove "only screen and "

Upvotes: 0

Hossein Rashno
Hossein Rashno

Reputation: 3469

I tried to test different screen sizes and apply media queries by changing the size of the viewport in chrome's developer tools like this:

enter image description here

Apparently, this is not how the media queries works and you need to resize the browser to test different media queries for different screen sizes!

Upvotes: 0

Sydney Y
Sydney Y

Reputation: 3152

I noted that the media queries were for very large screen sizes, ~1200-1700px, and that the OP was testing in Chrome with dev tools.

I pointed it out and OP discovered that his responsive mode wasn't properly mimicking a large screen size, so it turns out the media queries work as expected.

Some resources as a starting point for troubleshooting Chrome's dev tools: https://developers.google.com/web/tools/chrome-devtools/device-mode#viewport

They have a breakpoint view that visually maps out where the breakpoints are, which may help.

Upvotes: 0

Rag ch
Rag ch

Reputation: 76

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.

Upvotes: 6

Related Questions