Time for Action – Adding our media queries

The following steps will allow you to add your media queries:

  1. Below your typography section in your 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) {

}
  2. Save your stylesheet.

What just happened?

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 portrait

Tip

These 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.

Setting up the desktop view

We'll first start with our desktop browser view. We'll use layout-core.css to help us set our columns up.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset