Hi, my name is Dan. Welcome back to our regular website. So we've understood now how column widths work. When we're dealing with mini queries, let's go and apply it. So I'm gonna jump to Photoshop. So there's my design for large  and here's my design for mobile.

And the big changes are, this is about the same. Um, we're gonna turn this image off when it gets down  to mobile, we'll do that last. And we also want to, um, switch the way  that these guys are structured around. So instead of them stacking side by side,  they're gonna stack on top of each other. And the same with these portfolios here. So, um, I should have gone through  and done a tablet version, um,  and matched all four versions.

But to make these tutorials, um, a little bit shorter,  I'm just gonna do large and mobile and skip tablet. You should be doing tablet though. You should be doing designs for it  and work out what it's gonna do at those different stages. So in here I'm gonna work down. I'm not gonna be working on this one. I'm gonna be working on this, this, this chunk here.

Now when I'm at large view, where is he? Um, here go to large. It is stacked next to each other. What I'd like to do is when it gets down to small,  Okay, It's going to,  I realize there's a problem with him. We'll have to work out what, what his problem is later on. Um, you might not have that problem at the moment.

I've just noticed him there, but we'll fix him a little bit  later on when we get down to mobile. I'd like it to do this. I'd like  that the icon is on the left and the text is on the right. So let's see if we can do that. So, uh, here's my first one, okay? And I'm making sure I'm in this small view, okay?

Or the Xs view. I'm going to make this one  'cause at the moment defaulted to 12. So it's pushing this text underneath it. So I'm gonna shrink him up a little bit. So he is maybe Five across. And then this one here needs to be a smaller size  to fit next to him and he is going to be seven.

Okay, so there's my two units there. I've got one that's five  and one that is, if I can grab the collar on the  outside is seven. So when he is at large 12,  when he is down at extra small, he is set to seven. And we'll play around with lift the lining him when we deal  with the next video, when we deal with the styles. Okay? 'cause it's a left of line, it's nothing to do  with these boxes here.

So let's go through and do it for this guy as well. He's gonna be down to five. This app development's going to get down to seven. I'm gonna do the same for all of these guys. Make sure you grab the Outside container. You, there's a slight problem with him.

It's Annoying me now. I'll work out what it is. This guy down smaller five. This one here, it's gonna get down to print. This one here shouldn't say app development. This should be video.

Some along the line. I've missed that or lost it. You shrink down please. Occasionally it doesn't, if it has a really kind  of weird freak out, like my one's doing now  doesn't know what it's doing. And what you can do is hit this refresh button at the top  often that kind of gets it all back  settled and working again. Good old dream mover.

Okay, in this one here,  I'm gonna change from app development to video. All right, ignoring our broken off photography,  let's have a previewer browser. So let's do our device preview  opens up down here. So desktop, it's all nice except for him. Uh, and I'm gonna shrink it down. And you'll notice now when it gets down to um, mobile,  it's stacking icon on this side  and the text on this right hand side here.

There's a few little layout issues I want to deal with. All right, so this guy's annoying me too much. We're gonna go figure 'em out now  and we'll find out why he is wrong to make him look nice. So I'll notice this one here. There's a P tag with text center, text option one wrapped  around it and the A tag. So I'm gonna click on here, click my p tag there, is there,  and I'm gonna apply two classes.

One is text centered. There you are friend. Okay,  and I'm gonna add another one,  which was called, what was that one? It's called text option one. Please apply that one. Go to my p tag, apply this one.

Text, uh, option one. Hey, other than they're not left the aligned, uh,  at least they're now looking the same. Next bit we're gonna work on is these guys. This kind of doing what I want  and it's kind of matching  what I've got here in my mobile view. Mobile view actually is a little bit, um, uh, I want  to actually change it a little bit. I want it to actually be stacked these guys side by side.

So there's gonna be four of them, okay? And they're gonna be stacked two and two. So what I need to do now is I'm gonna click on this top one  and at large it spans three. Okay? Which gives me my, uh, 3 3, 3 3 equals 12. What I wanna do is do it six and six equals 12.

So I'm gonna drag this one down and watch. It only has a class of lg,  but when I drag it, Cameron, uh,  it adds another class. Okay? For excess of six, I'm gonna go through  and make all of these guys six UA six. Make sure you grab the columns. They start overlapping and doing  weird stuff when they're not all finished.

You might find this easier to do in co view. I'm gonna try and struggle on in live view  and drag along a little bit of dragging  and hoping I could see 6, 6, 6, 6. Great. So let's save it. I'm gonna jump out to my demo version. Gimme a demo version  And Scroll down.

Cool. So at mobile view there is, they're a side by side,  but when they're at a desktop view,  they're all stripped along here. Alright, so we're getting there. We've got a desktop view and a mobile view. You should be working on your tablet view as well, um,  and dealing with, um, the one called SM  and deciding what to do when it gets to MD as well. We're gonna skip that along just  to make this tutorial fly all in the next video.

Let's show you how to disable  and enable objects depending on their media queries.