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 going to create some CSS rules that are going to target medium screen sizes. So let's come back to our text editor. Let's choose File > Open. From the myWebsite folder, I'm going to the css folder, and let's open screen_layout_medium.css. Now, this file is only going to be referenced when the viewport is between 501 pixels and 800 pixels. So inside of here, the first rule we're going to target is going to be the header. Let's add our brackets.
We're going to set a height of 200 pixels. This matches the height of the medium-sized banner graphic from Photoshop. Let's hits a space. Next we're going to set background. Those properties are going to be url inside of the parentheses ../images/banner_medium.jpg. Outside of the parentheses we'll set the repeat to no-repeat.
For the x position we'll set this to 90%, and for the y position we'll set this to zero pixels. Next rule, header a.logo. Beginning and ending bracket. Let's put those open. So what we're going to redefine for the logo is going to be the width, so that's at 115. Let's set the height to 70 pixels. Again, this matches the dimensions of the Photoshop graphic for the medium logo.
Next we'll set a top property of 20 pixels and a right property of 20 pixels as well. The last property we're going to set is going to be background-image: url(../images/logo_medium.png);. Now with these in place, let's choose File > Save. Let's come back to our browser. Let's hit Reload.
Now in our browser we're going to resize the window. When we get lower than 800 pixels we'll see that the logo now get smaller. We'll see that the size of the heading now stops at 200 pixels, and the actual graphic in the background changes from the large graphic to the medium one. So if I resize this back, we'll see this is the large and this is the medium. So now that the header and logo are now being styled between large and medium screens, we'll work on the navigation next.
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.