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 to get our outer page container to extend down to encompass all of the content inside of the individual promos that have a float property, we're going to need to add another element after the promos to clear the float. So let's go back to our text editor. Let's first go into index.html. Let's scroll down. And after our three promos here, let's add one more div at the same level as the promos. We're going to set a class of "clear-fix." Let's end that div.
So this is a class name that we're making up. You can call this anything you want. Let's choose File > Save. Let's come back to screen_styles.css. After our navigation element here, let's create a rule that targets that class so ".clear-fix." The property we're going to set in here is going to be clear and we're going to set that to both. The other thing I like to do is set a line height of one pixel and then choose Save.
So now let's come back out to our browser. Let's hit Reload and so now that div, if you can imagine, is down here. It's got a clear bulb set to it so the outer most page container will now extend down to encompass that div. And since that div appears after all of the individual promos and doesn't have a float, the outermost page container is forced to increase its height to encompass that element. Now that we have our float properties working, next we want to add one final rule to our footer for large screens.
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.