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
The test is probably expecting the media query to be on it’s own, not nested within a selector. Did you try that?
I tried, but it still doesn’t work
- 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;
}
}
- 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