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
119 Video lessons · 47297 Viewers
117 Video lessons · 34249 Viewers
113 Video lessons · 80252 Viewers
116 Video lessons · 70176 Viewers