2

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;
    }
  }
}
Hossein Rashno
  • 3,073
  • 1
  • 25
  • 49
  • So you're already certain you have the meta viewport tag in your html and that you're not overriding the media query by using the same selector below it in the css? Sorry, gotta ask. – Sydney Y Feb 11 '20 at 05:08
  • @SydneyY Yes, both checked. – Hossein Rashno Feb 11 '20 at 05:09
  • Is other css in the same file being applied? (To prove that your media queries were in a successfully loaded stylesheet) – Sydney Y Feb 11 '20 at 05:14
  • 1
    @SydneyY Yes, every other CSS role in that file applied, except for those ones in the media query. – Hossein Rashno Feb 11 '20 at 05:22
  • Can you please add an entire media query block into your question so we can take a look? You can simplify it a bit, but don't change it too much :) – Sydney Y Feb 11 '20 at 05:32
  • Those screen widths are pretty big. You have a screen big enough to test those with dev tools open? – Sydney Y Feb 11 '20 at 05:49

5 Answers5

6

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.

Rag ch
  • 76
  • 2
0

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.

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
0

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!

Hossein Rashno
  • 3,073
  • 1
  • 25
  • 49
  • Instead of providing a solution, you've simply reiterated the issue that needs to be addressed. The top voted answer provides the actual solution, a meta tag needs to be added to the head of the html doc. Please edit this or remove this to avoid confusing people. – Johnson Jan 27 '23 at 16:03
0

remove "only screen and "

Rohit Rohra
  • 41
  • 3
0

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.

Joseph
  • 5,070
  • 1
  • 25
  • 26