Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we have all of the CSS rules in place for our large screen, in addition to all of the type styles, so if we come up here into our browser and start collapsing this down, we'll start seeing some of those CSS rules take effect. First is, as I close this down, you'll notice that the banner, having the background graphic aligned to the right, actually collapses down from the left-hand side. Even if I come over to the right-hand side of the browser and collapse this down, it always starts trimming from the left-hand side. You'll also notice that the promos down at the bottom are taking one-third of their individual space, because they're set to 33%, so you can see those condense down as well.
But there is one additional rule I want to add to our footer. So you'll notice if I come down here and collapse the browser down, when the edge of the browser gets to the edge of the page container, notice that the copyright actually touches the edge of the browser. So what I want to do here is I want to create an inline CSS property so that we can still be on the large screen, but I want to have that footer just move away a little bit so it doesn't actually touch the edge of the browser. So to do this let's come back to our text editor. Let's come over to screen_layout_large.
After our nav a, let's hit a return, and we're going to create a rule for the footer inside of an inline media query. So we're going to start by typing an @media screen and (max-width: 990px). Then outside of the parentheses we're going to put our brackets. Let's hit a return.
Inside here we're going to put our rule for footer. So footer space, put in our brackets. We're going to put padding-left. We're going to set that to 20 pixels and then hit Save. So what this does is instead of bringing in a separate CSS file, we just have this footer rule inside of this media query. So this single rule will be enabled when our browser is under 990 pixels. So I'll choose File > Save. Let's come back out to our browser. Let's hit Reload. And if I come down here and collapse the browser down, as soon as we get with the 990 pixels, notice that the padding-left takes effect on the footer and the copyright symbol moves away from the left-hand side of the browser.
Now, with all of our large CSS rules in place, this is how the design will look for older browsers as well. So if we collapse this down, all of the properties will condense down, and we'll see exactly the same user experience in browsers that don't support media queries. So now what we're going to do for the remainder of the course is target small- and medium- screen-size rules and rearrange the layout based on the size of the user's screen.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58445 Viewers
119 Video lessons · 67661 Viewers
84 Video lessons · 16924 Viewers
125 Video lessons · 29824 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.