Phew! We've got our hands dirty on this chapter, delving into our theme stylesheet and writing some code.
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-widthto 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....