Reviewing what we've done

Phew! We've got our hands dirty on this chapter, delving into our theme stylesheet and writing some code.

What just happened?

We've added some media queries for iPads and smartphones and some code to make a slight amendment to the site on iPads in portrait mode. Let's have a look at the code that's now at the bottom of our stylesheet as follows:

/* 6. Mobile */
/*iPads in landscape mode*/
@media screen and (max-width: 768px) {
#access {
font-size: 18px;
}
}
/*smartphones in landscape mode*/
@media screen and (max-width: 480px) {
}
/*smartphones in portrait mode*/
@media screen and (max-width: 320px) {
}

What we need to remember about the preceding code snippet is as follows:

• We set a separate media query for each screen size, using max-width to ensure the styling only applies to the screens at that width or lower.

• If styling from a wider screen size (set higher up in the stylesheet) also applies to a narrower screen size (set lower down), we don't need to repeat it....