Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 45168 Viewers
119 Video lessons · 56040 Viewers
65 Video lessons · 15902 Viewers
113 Video lessons · 83523 Viewers
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.
Your file was successfully uploaded.