In this exercise, practice applying media queries to change the CSS for different screen sizes.
- [Instructor] For this last exercise, let's use the developer tools to help us decide what break points to use and to test the layout. If you don't already have the dev tool open, go ahead and open it now. You don't have to dock yours to the right like I mentioned in the last lesson, this is just a personal preference. Okay, we're ready for our first test. Let's resize the view port and look for points where the design starts to break down. At this size, everything looks fine. So let's go a little bit smaller. Okay, so around this size, the work experience and the project columns are starting to look a little bit squished. So let's check to see what the width is so we can determine our first breakpoint. I'm going to hover over this body tag here, because the body encloses the whole page. That'll give me the width of the view port. And right now it's showing that it's 735. So maybe I'll just round that up a little bit and use 750 as my first break point. Let's go back to the CSS file. In an earlier lesson, we talked about the different ways to add media queries. They can be added anywhere as long as it comes after the base styles, since CSS reads the styles from top to bottom. So I'm going to add mine to the bottom of the page, but the first thing I'll do is I'm going to copy this comment block so I can create a new one for my response styles. Then I'll add my at media rule. The media type is optional, but I'll use the screen type here. Remember, if you don't add it, it will default to all which will also work for responsive changes. I'm going to add my curly braces in so I don't forget. For the break point, I decided that 750 pixels was a good width to start with, but now I need to decide if we should use a max width or a min width. Let's look at the design again to decide what to do. For the project section, I want to turn this back into one column for the smaller size. Here is where we applied the float to the image. So to return this back to stacked elements in one column, I would have to remove the float. Let's inspect this particular element so that we can see the corresponding CSS. We could right click on the element itself and just select inspect element again, or we can use this icon here to pick the specific element. Here is our corresponding CSS. In the dev tools, we can uncheck a CSS declaration to see how the element will look without that style. This is great for testing and fixing bugs. So by unchecking it, I can confirm that this is the style that I want to override. So if I use max width, that means it will target a view port 750 pixels or smaller. So I would have to set the float to none to override the left float for smaller view ports. But, if I use min width, that means it's 750 pixels and larger, so I can just move that float style to this media query to target the bigger sizes and not have to override anything. Let's go with min width. We'll go back to our CSS file and we'll need to separate this with the keyword and because we're now using a media type and a media feature together. For our min width, add the parenthesis, min-width:750 pixels, no semi-colon. Now let's go up to our project item image block. This is where we edit the float and the margin write to add that little space between the image and the text. So we can actually move this whole thing down to our media query. So I'm going to copy it and then delete it from this section and move it here. By adding it here, the float will only apply for view ports that area 750 pixels or larger. So let's save that and check the change in the browser. Refresh, when we're at 750 pixels and smaller, everything is stacked and when we get larger it's back to two columns. There are no restrictions for how many break points you can add, but it's best to only use what you need. So since we have one established now, let's see what else may need fixing at this same break point. So let's go back down to about 750, there we go. Let's look at our work experience columns. They can also be stacked for this size too. So for this section, we had used grid to lay out the columns so let's inspect that style. Here are our grid styles. So if we uncheck the grid styles in the dev tool we can see that by removing it, the column style will also be removed. So we can do the same thing that we just did for the project section. We'll move those grid styles to the media query so it only applies to the larger view port sizes. Let's go back to our CSS file and find those grid styles. Okay here it is, all three of these properties are used to create those columns so we'll move the whole block. Copy, delete it from this area, move it into your media query. Now let's save the file and test the change. Refresh, and there we go. One column, work experience, projects. Let's go bigger than 750 and we're back to a column layout. Now that the columns have been removed and everything is left aligned, I also want to remove the text align center from the header and the footer blocks. At this size, I think it'll just look more consistent if I remove the center line. Let's go back to our CSS file. Right now, we have text align center added in both the header and the footer blocks. So, let's delete those styles from those sections and then we can combine them in the media query. So I'm going to copy this and then delete it from this section as well as my header. And then I'm going to combine these two, separate it by a comma and put the text align center here. Let's save the file and go back to the browser. Refresh to see our changes. And now it's left aligned. Let's check the header. Left aligned as well. And when we go bigger than 750 it's center aligned again. So there's a few more things that we can change, the H1 for example, this heading could be a little smaller for the smaller view ports. Also, the alignment in the footer links will need to be adjusted. Let's go back to our CSS file and first we'll tackle the header. In the min width media query we were adding styles once it hit a particular width, but for the header change, we won't be able to add it to the min width block because I want to set a different size for both the smaller view ports and the larger view ports. So let's create another media query, but this time using max width. And I'm going to use a value of 749 pixels to avoid conflicting with this min width value. So I'm just going to copy this and then change this to max width and change this to 749 and I'll add the closing curly bracket. So right now, the H1 font size is set using the H1 selector. So to override this value I'll use the same selector for the media query, except this time I'm going to set the font size to 75 pixels. Font-size75 pixels and save it. Check the change in the browser. So it's a little bit smaller now and I think it fits better. But now the H2 spans over two lines, which I don't mind but there's a lot of space in between. So I'll make a change to the line height. Same with the H1, there's a little bit too much space in between there as well. So I'm going to change the line height for the H1 too. So let's go back to our CSS file and make those changes. So let's see if we can set them both to one. That would remove all the space. Let's see how that looks. Okay, so the space between the H2 is nice and close, but I could take a little bit more space from the H1. Normally, setting the line height to one should remove all the space, but sometimes it depends on the font. So let's go back and make a revision. I can't combine it anymore because I'm going to give a different value to H1. So I'll delete that and set the line height to, let's try 0.9, just a little bit less than one. Save it and check the browser again. That's better, it's a little bit closer together, but now I want a little more space between these two headings so I'm going to add some margin bottom to the H1. Margin-bottom, let's go with 20 pixels. Save it and refresh, much better. I think the header is good for now. Let's move on to the footer. In the smaller size, all four links no longer fit in one line. And I don't want them to wrap either, so I'm going to remove the horizontal layout and just left align the links. This was created with Flexbox. If we look at the contact list declaration block, there are other styles I want to keep, like these two list style type none and padding zero removes the default list styles. So, I'm just going to move the flex styles to the min width media query. Let's go back to our CSS file and make that change. I'm going to grab these two styles and remove it from this section and add a new contact list selector in the min width media query and then add the two flex styles down here. So now, for the smaller sizes, they'll stack on top of each other and for the larger sizes, it'll display horizontally. Let's save that and check. Okay so they're now stacked on top of each other and at the larger size they're back to being horizontally aligned. So, let's make another change here though. They're stacked but there's a little bit too much space in between. We're just going to adjust the padding since that's where it's coming from. See we added some padding around the link tags, so let's go ahead and make that adjustment. Go back to our CSS file. We're going to add this change to the max width media query because we don't want to override the padding styles for the larger screen size, we just want to add it for the smaller screen sizes. So our selector was contact-list and then A for the links. I'm going to set that padding to five pixels. You still want a little bit of space. Let's save our file and check the page again. Refresh, much better. Before we get out of here, let's check the page using the device emulator. So I'm going to expand this back out a little bit, get a little more space. Let's start from the top. Going to open my emulator. Here's how it looks in an iPad. Let's try a smaller size. Let's go with the iPhone. And here's how it looks in the iPhone. Everything is stacked in one column, we no longer have squished columns, everything is aligned and fits on the page. Let's change the device orientation. Okay, not bad. There's probably some little adjustments I can still make here and there, but depending on your content and your font choices you may find that you'll need to make revisions that are different than mine. Our page layout wasn't too complex, but we also created a fluid foundation, so often times if you're layout is flexible to begin with, many of the responsive changes are just these little fixes. We've come to the end of the course and the project exercise, but it doesn't have to end here. Now that you have some tools under your belt, you can continue to experiment and customize your projects. It doesn't hurt to even start from the beginning and see what you can build now that you've seen the full picture.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts