Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
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.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.