Template Adjustment Tutorials
Page Navigation
- The Cool Corner
- Intro to CSS
- Media Queries
Media Queries
Common Media Breakpoints
-
Desktop: 1024px
Tablet: 768px, 640px
Mobile: 480px, 320pxFor your consideration...
Will your CSS mess with breakpoints? Make sure you test it!
Media Query Syntax
-
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
