The Media Queries Solution2:44 with Guil Hernandez
In this video, we'll go over the media queries for this practice session.
Hopefully, you were able to write most or all five media queries for 0:00 this practice session. 0:03 Now let's walk through the solution. 0:04 And you can also reference this code when you download the project files. 0:06 So first up, you were asked to target viewport sizes less than 576 pixels, 0:08 so the key words here are less than, which should indicate that 0:13 you should use the max with media feature and the media query expression. 0:17 Now, in the media query, you don't want to target the viewport starting right at 576 0:22 pixels, it needs to be less than that. 0:27 So the expression, max-width, 575 pixels will do the trick. 0:29 In the next block of CSS rules, 0:35 to Target viewport sizes when there are 576 pixels and wider, 0:37 you'll use min-width 576 pixels as the media query expression. 0:42 Now, the next one is a little different from the others. 0:50 The nav rule needs to be inside a media query that targets only a specific 0:53 range of viewport sizes. 0:58 So when the viewport is greater than 575 pixels and 0:59 when it's less, they're 992 pixels. 1:03 So the keyword, and, suggest that you should use the and 1:07 logical operator to combine media features. 1:11 So to Target a viewport, when it's wider than 575 pixels 1:14 specify min-width 576 pixels and to continue targeting 1:18 the viewport all the way up to a width narrower than 992 pixels. 1:23 You specify the and operator followed by the media feature max-width 991 pixels. 1:28 Next, you target medium viewport sizes that are 768 pixels and 1:36 wider, using the expression min-width 768 pixels. 1:42 The last media query needs to target large devices and 1:51 up when a viewport is 992 pixels and wider. 1:55 So, similar to other media queries in this exercise, 1:59 you'll use the min-width media feature and specify a minimum-width of 992 pixels. 2:02 You may have written your media query slightly different. 2:10 For example, maybe you included the screen media type before each 2:13 of the media query expressions and that's totally fine for this practice session. 2:18 I left them out of mind to make the media queries suitable for all devices. 2:21 All right, so now your page should be adjusting to the five break points 2:26 you created. 2:29 Now, if it's still not quite there, that's okay. 2:30 Just keep practicing these until you feel comfortable using them. 2:32 After a little practice, 2:35 you'll be surprised by how much better you're getting at CSS. 2:36 I'm also going to teach you lots more about media queries in an upcoming course. 2:39 So, I'll see you soon. 2:42
You need to sign up for Treehouse in order to download course files.Sign up