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 heading area for large screens. So inside of our layout_large css file, let's come down here after the Layout Large Screens comment and let's create a rule that targets the header. So we'll type header, beginning and ending bracket. Let's split those open. The first property we're going to set here is going to be a height of 275 pixels. That matches the height of the slice we created in Photoshop for the large banner. Let's hit a return. We're going to set background.
We're going to set url, beginning and ending parenthesis. Inside of the parentheses, ../ to come out to root, /images/banner_large.jpg. Outside of the parenthesis, set no-repeat. For the X position, we're going to set right, and for the Y position we're going to set 0 pixels. Let's hit a few returns. Next, we're going to type headerr, space, a.logo, beginning and ending bracket.
Let's split those open. So for the logo on large screens, we want to first set a width. We're going to set that to 150 pixels, again matching the slice size of the large logo in our Photoshop file. Next we'll set height to 85 pixels. Next we're going to set the top property. This locks onto the position absolute that we set up here earlier. So for the top value, we're going to set 28 pixels. We're going to set a right value of 30 pixels.
This will make sure of the logo is always 30 pixels from the rightmost side of the screen. Next, we're going to come down here and we're going to choose background-image, url, beginning and ending parenthesis, ../images/logo_large.png, then a semi-colon. Let's choose File > Save. Let's come back out to the operating system and let's load this on a browser.
So now in the browser, we've given dimension to our heading area so we can see that this is now 275 pixels tall. We have our large banner graphic in the background and we have our logo over here on the right, which also has new block property dimensions and a background graphic referenced in from that rule we just created. So now that we have the header and logo links working for the large screens, next we'll work on the article and 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.