To add custom CSS for a device of a particular width, we use max-width, so the code for iPads would be as follows:
@ media screen and (max-width: 768px) {
}
What this code does is to identify that the site is being visited on a device with a maximum screen width of 768px. The CSS goes between the braces.
So, let's see how it works by adding some styling for iPads. Perform the following steps:
1. At the bottom of the stylesheet, we will add a section for mobile styling. The Carborelli's site has numbered sections in its stylesheet, so at the top of our new section we will add the following line of code:
/* 6. Media queries */
2. Beneath the preceding line of code, we will add the following code snippet:
/*iPads in portrait mode*/ @media screen and (max-width: 768px) { }You'll notice the comments that are always useful to help us keep track of what device we're targeting.
3. Next, inside the curly brackets, we will add styling to change the size of...