The following steps will allow you to add your media queries:
style.css
stylesheet (or at the bottom of the stylesheet if you have other code below your typography section), add the following media queries:@media (min-width: 1220px) { } @media (max-width: 1024px) { } @media (min-width: 480px) and (max-width: 800px) { } @media (max-width: 480px) { } @media only screen and (min-width: 320px) and (max-width: 480px) { }
We added some media queries to target the screen sizes most commonly used. Let's have a look at how they work:
@media (min-width: 1220px)
targets very large screens@media (max-width: 1024px)
targets small desktop screens and larger tablet screens@media (min-width: 480px) and (max-width: 800px)
target small tablet screens or larger tablet screens in portrait@media (max-width: 480px)
targets small screens including phones in landscape@media only screen and (min-width: 320px) and (max-width: 480px)
target phones in portraitThese media queries work for the vast majority of devices available at the time of writing. But as more and more devices are released with different screen widths, you may find these media queries don't continue to target the devices you expect them to. When working on your theme, you may find it helps to tweak these media queries so they target widths at which the design needs to be altered for it to look good, rather than focusing on specific devices.