Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 the next element we're going to target is going to be the article, so I'm going to scroll up here a little bit. So after header a.logo, let's add article, beginning and ending bracket. What we're going to do in here is set the padding. We're going to 60 pixels on the top, 20 on the right, 10 on the bottom, and 20 on the left. Let's choose File > Save. This is going to give us some padding around the content inside of the article. Let's come back out to our browser.
Let's reload our page. So no we'll see that space, that padding showing up around the article. We also have 60 pixels here at the top, because this is where we're going to position the navigation that's lower in the page, so we need to have a little bit of room between the article and the heading area. I'm going to leave the web browser open but come back to my CSS file. So after article, we're going to create another rule that's going to target the promo_container. So .promo_container, beginning and ending bracket. Here we're going to set padding as well: 0 pixels on the top, 0 on the right, 15 on the bottom, and 20 on the left.
Let's hit a return. promo_container .promo. This is going to target the individual promos inside of the promo container. Put in our brackets. Let's split that open. The first rule we're going to set inside of here is going to be our width. We're going to set that to 33%. Next, we're going to set a float of left. So these two rules combined are going to make sure that each promo is going to take up one-third of the available space, and they're going to allow our content to float to the right-hand side of each one, giving us that three-column effect. The next property for each promo, we're going to set background-position.
We're going to set zero pixels on the X and three pixels on the Y. This is going to position each one of the graphics down a couple of pixels so the top of the image will match the top of the x-height of our copy. And then we'll create one more rule: .promo_container .promo space .content. We're going to target the content divs inside of each one of the promos. What we're going to do inside of here is set padding. We're going to set 0 pixels on the top, 30 pixels on the right, 0 pixels on the bottom, and 70 pixels on the left.
This is going to make sure that the text inside of the content container doesn't get within 70 pixels of the left-hand side, so we can actually see the background-graphic showing without the type overlapping. At this point, let's hit File > Save. Let's come back over to our browser and let's hit reload. Now we'll see each of the individual promos is taking one-third of the available space. They're floating to the left of each other, giving us that column effect. And we can see that the text is now 70 pixels away from the left-hand-most edge of each individual promo, allowing us to see those background graphics.
So now with our article and promo areas styled, next we're going to start working on the styles for the navigation.
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.