Responsive web project: Media query not working

HTML-CSS
1

I am working on a product landing page, and cannot seem to pass the media query test no matter what I try.

Here is my codepen address: https://codepen.io/aracho1/pen/byWWyO?editors=1100

Also how can I make body part of the page scroll up only to a certain margin?

Thanks a lot

2

The test is probably expecting the media query to be on it’s own, not nested within a selector. Did you try that?

3

I tried, but it still doesn’t work

4
  1. You are missing the selector inside the media query.

You have:

@media (max-width: 800px) {
  font-size: 10px;
}

Should be, for example:

@media (max-width: 800px) {
  body {
    font-size: 10px;
  }
}
  1. You want the media query after the selector you are changing or adding properties on.
body {
  font-size: 20px;
}

@media (max-width: 800px) {
  body {
    font-size: 10px;
  }
}

Note: The product page example project is using the CSS preprocessor SASS/SCSS with it you can have nested media queries. In SCSS when you nest the media query the selector is taken from the outer CSS block

body {
  font-size: 20px;
  
  /* With SCSS the nested media query is now affecting the body selector */
  @media (max-width: 800px) {
    font-size:10px;
  }
  
}
1 Like