Hey everybody, welcome back. Let's go look at some code together. What we're looking at here is an example from when we first learned about fluid measurements. We went in and we switched our absolute measurements of pixels and started using percents. And it works out really well, unless you take it and you look at a small screen. Right now, the three columns is fine. But when we get smaller, right here, it really doesn't make sense to try to shove three columns worth of content into such a small screen. This is where the idea of mobile first really comes in. What I think would be a much better look is to have each column stacked on top of each other and only go to three columns when you're on a large screen. So let's take a look at how we can make that change together. The first thing that we need to look at is what these columns are. And what we have is we have dibs each of type class equals column. The nice thing about dibs is that by default, they're block. If we don't do anything at all they're going to be stacked just the way we want them to be. So let's find our code. Right here. You can see that I went in and I said I only want them to be 30% and in line block. I floated them and all that great stuff there. The truth is, when we think mobile first, we shouldn't be changing anything at all in the column. So I'm going to take this code and I'm going to delete it. All right, I've done it, their block, and on the large screen, it looks really silly. But on the smaller screen we have success I was looking for, we have our mobile first view. Now the question is, how do we go from a single column to three columns as we get bigger? And the answer is to use media queries. So I'm going to scroll down to the bottom of my CSS. And I need to add some code. How do we make a media query? Don't forget, it's all about putting in that type and that break point. So I'm going to put in at media screen. And min-width, let's go ahead and pick a number. I'm going to say 778. All right, make this a little bigger so you can see it. So what I'm saying, whoops, and dev should definitely be pixels not PS. What I'm saying is, hey browser, if you are this size or bigger, I want you to run some special code. And what code is it? It's that code that says, never mind, I don't want to be a single column, I want to be three column. So I'm going to put that back in there. Save it. And boom, it happened already. It goes in, the browser figures out your size, and then goes in and makes any changes. This is hopefully pretty straight forward to you, although you might want to look at the code for a little bit, change the numbers. I'm going to change this to 1,200, right away it goes back. You can play with these break points, these are the break points that we talked about earlier, to find that perfect look for your page. As we make more and more complicated media queries, I really want you to go back and make sure you understand these simple ones first. Good luck.
