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're on our small screen devices, we're going to want to rearrange the content again inside of the promos. So what we want to do in this case is have the promo stack vertically. We still want to have the text to the right-hand side, but we want to get rid of the columns. So let's come back to our text editor. Let me scroll up here. After our navigation elements, let's hit a few returns. Let's target the promo_container, space, add our brackets. Let's set padding to 0 pixels.
Let's come over here and copy the promo_container name. Next rule. Let's place promo_container .promo, beginning and ending bracket. Let's split that open. Now what we're going to do for each individual promo, let's reset the width to auto, so this overrides the setting we had earlier, which set these to 33%. Now setting this to auto means they'll take the full width that's available by their parent. Let's hit a return.
We're going to set the float to none, so they're not going to float anymore either. Next I'll set padding to 10 pixels on the top, 0 on right, 0 on the bottom, and 0 on the left. Let's hit a return. Let's set background-position. We're going to set the background-position to 20 pixels on the X axis and 13 pixels on the Y axis. What this is going to do is move the graphics down a little bit from the top and a little bit in from the left so that the images don't actually touch the edge of the browser.
Next property is going to be border-top. We're going to set that to 1 pixel, solid, and for the color we're going to put pound sign and three Cs (#ccc;) for a medium gray. Let's hit a return and create one final rule. Let's paste the promo_container name, space, .promo .content beginning and ending bracket. Let's come in here and set the padding to 0 on the top, 20 on the right, 5 on the bottom, and 90 pixels on the left.
Now, the reason we're setting this to 90 is we're using the background-position on the X for the images at 20, so we need to take the original 70 plus the 20 that we're offsetting this one, to get a total of 90. Let's come in here and hit Save. Let's come back to our browser. Let's hit Reload. Now we'll see the individual promos will stack vertically, because we took the float properties off. The width is auto, so the width will be the full width available by the browser, and then each one of these items will stack. The background-image is positioning 20 pixels on the left, 13 from the top. And the text is positioning 90 pixels, to accommodate for the new position of the background-image.
Now that we have the promo styled for small-screen devices, next we'll work on the background and the footer elements.
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.