Adding Media Queries for Large Screens2:50 with Guil Hernandez
In this video, you'll learn how to style the navigation layout for large screens, using media queries.
In this video, I'll style the navigation and column layout for 0:00 larger screens using media queries. 0:03 So back in my style sheet, the media query here will apply the styles I write 0:06 inside it when the view port or device is 769 pixels or wider. 0:11 First, I'll create a new rule inside the media query that targets 0:16 the class container. 0:19 Inside the container rule, I'll set a width value of 90%, 0:22 and then I'll set a margin of 0 auto. 0:28 Giving the container a width prevents the layout 0:34 from stretching too wide on larger screens, and setting the left and 0:37 right margin values to the value auto centers the container in the browser. 0:40 So next, I'll style the name and navigation elements inside main header. 0:45 So back in my media query, I'll create a new rule that targets name. 0:50 And then I'm going to float it. 0:56 So I'll add a float property, and I want to float it to the left of the header, so 0:58 I will set the value to left. 1:03 And right below, I'll create a new rule that targets the class main-nav. 1:06 And I also want to float main-nav, but this time I'm going to float it right. 1:12 Right below the main-nav rule, 1:20 I'll create another rule that targets the list items inside main-nav. 1:23 Then I'm going to display these list items as inline-block, and 1:29 I'm going to give them a margin-left value of 15 pixels. 1:34 This will display the list items side by side and 1:40 create some separation between each navigation item. 1:43 So here I'm using a combination of both floats and 1:46 inline-block to lay out the main-nav and navigation elements inside. 1:50 Now if you floated the navigation items or used inline-block to lay out 1:55 the site name and main navigation on the same line, that's also fine. 2:00 This is just the method I used. 2:03 Finally, right below the main-nav li rule, 2:05 I'll create another rule that targets the class tagline. 2:09 This tagline class selector will target the span element inside banner 2:15 with the class tagline. 2:20 In the tagline rule, I'll write a font-size property, 2:21 and I'll set the value to 1.4em. 2:28 This will increase the tagline font size and 2:32 make it stand out more in larger screens. 2:35 Okay, so next, you'll learn how I styled the column layout in medium and 2:43 large screens. 2:47
You need to sign up for Treehouse in order to download course files.Sign up