Alex Bieg Alex Bieg - 4 months ago 14
Sass (Sass) Question

sass media query unexpected behavior for min-width

I am using media queries to change the font size of some text on my site. However it is not working as I understand them to work.

p {
font-size: 3rem;
@media (min-width: 768px) {
font-size: 2rem;
@media (min-width: 992px) {
font-size: 1.5rem;
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}

Currently the min-width: 768px applies to everything under 992px. For example at 440px width it still has a font size of 2rem. The 3rem font size is never used. One interesting thing to note is that this is only happening in Chromes Responsive device tester. If I make the actual window small then it works.


make sure you include in your <head> this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Source: Css tricks