Search code examples
htmlcssbreakpoints

Not being able to use breakpoints in CSS

I'm a newbie at web development and I'm giving my first try at responsive layouts. I'm trying to do something very simple: show a certain color according to the screen width. For whatever reason, the code is not working (I'm simulating mobile access by using both Chrome and Firefox). This is my css page. Am I missing something?

@media screen and (max-width: 768px) {
  body{
    background-color: blue;
  }

}

body{
  background-color: green;
}
Solution

  • See "Cascading order": Given selectors with equal specificity and rule-sets that sets the same property: The last one overrides the previous ones.

    If the width is more than 768px, then the rules in the media query will be ignored and the background colour set to green.

    If it is less than or equal to that, then the background will be set to blue but that will be overridden and changed to green.

    Change the order of your CSS.