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 target the headings and the paragraphs inside of the promo area. So inside of our CSS file, let's hit a few more returns. Let's create a compound rule, .promo h3. We want to target h3 tags that are inside of an element with a promo class. Add our brackets. Then we're going to set font-size to 1.1 ems. I'll bring the set margin to 0 and then a semi-colon.
If we just set one number in the margin, it will set up for all four sides. Next, .promo p. We're going to target paragraphs inside of the promo area. Put in our brackets. First, we're going to set line-height. 1.2 ems, space. We're going to set font-size to .9 ems. Next, we're going to set margin-bottom to .5 ems, then save.
Let's come back out to our browser. Let's hit reload. So now we can see that these headings are a little bit smaller. We can see the font size here for the paragraphs is just 10% smaller than the base font, and everything here is just locking up a little bit tighter now. Now that we have the type styled for the promo areas, next we'll add in images into the background areas for the individual promos.
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.