CSS

Media queries in css

An easy way to make your website “responsive”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

If screen width >= 600px, nav,section elements will display as this, and if screen width <= 599px, nav,section elements will display like that, quite easy!