Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we're on our small screen devices, we're going to want to rearrange the content again inside of the promos. So what we want to do in this case is have the promo stack vertically. We still want to have the text to the right-hand side, but we want to get rid of the columns. So let's come back to our text editor. Let me scroll up here. After our navigation elements, let's hit a few returns. Let's target the promo_container, space, add our brackets. Let's set padding to 0 pixels.
Let's come over here and copy the promo_container name. Next rule. Let's place promo_container .promo, beginning and ending bracket. Let's split that open. Now what we're going to do for each individual promo, let's reset the width to auto, so this overrides the setting we had earlier, which set these to 33%. Now setting this to auto means they'll take the full width that's available by their parent. Let's hit a return.
We're going to set the float to none, so they're not going to float anymore either. Next I'll set padding to 10 pixels on the top, 0 on right, 0 on the bottom, and 0 on the left. Let's hit a return. Let's set background-position. We're going to set the background-position to 20 pixels on the X axis and 13 pixels on the Y axis. What this is going to do is move the graphics down a little bit from the top and a little bit in from the left so that the images don't actually touch the edge of the browser.
Next property is going to be border-top. We're going to set that to 1 pixel, solid, and for the color we're going to put pound sign and three Cs (#ccc;) for a medium gray. Let's hit a return and create one final rule. Let's paste the promo_container name, space, .promo .content beginning and ending bracket. Let's come in here and set the padding to 0 on the top, 20 on the right, 5 on the bottom, and 90 pixels on the left.
Now, the reason we're setting this to 90 is we're using the background-position on the X for the images at 20, so we need to take the original 70 plus the 20 that we're offsetting this one, to get a total of 90. Let's come in here and hit Save. Let's come back to our browser. Let's hit Reload. Now we'll see the individual promos will stack vertically, because we took the float properties off. The width is auto, so the width will be the full width available by the browser, and then each one of these items will stack. The background-image is positioning 20 pixels on the left, 13 from the top. And the text is positioning 90 pixels, to accommodate for the new position of the background-image.
Now that we have the promo styled for small-screen devices, next we'll work on the background and the footer elements.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50017 Viewers
117 Video lessons · 37328 Viewers
113 Video lessons · 81201 Viewers
65 Video lessons · 10628 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.