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.
Next we're going to style the footer. Let's hit a return. I'll type footer, beginning and ending bracket. The first property here is going to be font-size. We're going to set that to .85 ems. That's going to give us a 15% smaller font size than the base font. Then a space. We're going to set color to #9ba0bd; space. We're going to set background-color, and we're going to set the background color to the same as the body.
So let's come up here and just copy that color. Let's come down here and paste it, then a semicolon. That way the footer will actually look like it's outside of that main content page container. Then a space. We're going to set padding: 10 pixels on the top, 10 pixels on the right, 10 pixels on the bottom, and 0 pixels on the left. Save our work, come back to the operating system, and let's reload this in a browser.
On the browser, we can see our footer down here. Since we set the padding to 0 on the left, the copyright lines up now with the page container and we can see that background color. Since the gradient is much taller than the amount of content we have in here so far, you can actually see that solid color here. But once we add in more content and this gets taller, the background color of the footer will match the background down here. If it turns out that your website doesn't have enough content to go beyond this gradient here, then you can always go back into Photoshop, change the gradient on the background graphic, and resave out that slice.
Now that we have the main content rule styled, next we'll target these individual links that are inside of the promo areas.
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.