CSS

media queries on mobile

@media only screen and (max-width: 600px) {
	...your css here and you're good to go!
}

css media queries mobile first

@media screen  and (min-width:700px) {
    
} //this means the above media queriy will apply if the screen has a minimum screen width
 //of 700px., meaning screens with screen sizes of 700px and above will be affected by the above media query

mobile first media queries

@media screen and (min-width: 400px)  {...}
@media screen and (min-width: 600px)  {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}

mobile first media queries

/* Default media */
body {
  background: #ddd;
}
/* Media for larger devices */
@media screen and (min-width: 800px) {
  body {
    background-image: url("bg.png") 50% 50% no-repeat;
  }
}