Hi, my name is Dan and in this tutorial we're gonna look at creating the mobile version of our website. To do that, we need to understand a couple things. One is what responsive is and one, uh, another one is what a media query is. 'cause up until now, we're build building the desktop version. But if you look at my Photoshop mockup, I've got this one on the right here. I've designed my desktop, but I've also got what it looks like when it falls down to mobile.
You can see it's a little bit different. Some images turn off these stack differently. These stack differently. Okay, so I need to do that in Dreamweaver. Let's have a look at what our current site does. Alright, so let's see a working version of it.
Now, this site here, uh, start Bootstrap sells themes for, uh, bootstrap. We are creating our own at the moment, but if you wanted to cheat and make, uh, buy one, you can start here. Now, uh, one of their themes here is just nice and clear to see what it does when it breaks down in terms of responsive. So what happens is it clicks and we are dragging it down. And as it gets smaller, you can see it desktop view, it's set to these, uh, featured boxes to be four across. But when it gets smaller down to say tablet, you can see it breaks down to two and two.
And when it get down even further, it breaks down to mobile view, um, which is, um, all stacked on top of each other. And two things are happening. The term responsive is the kind of broad term for say that the website, uh, responds depending on the browser size, the thing that activates the browser, okay? Or activates these changes from tablet to mobile is something called a media query. And it's a bit of code that says the screen width happens to be 700 pixels here. So it's activating the tablet version, but when it gets below 700, it activates the mobile version.
Okay? And there's just a bit of code that just looks at the screen size and the, uh, browser width and activates different bits of code depending on how wide the browser is. So if you're done on a mobile, it's gonna activate the mobile size. Now there are two distinct uses for these media queries. One is to activate the columns, okay, which we just looked at before. You can see, remember we did earlier.
We're playing around with our columns. This thing here is 12 columns across, and this one here is occupying 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, waiting up to 12. Okay? So these guys are spaced out this, um, but when I get down to tablet, that's actually different now where it was, uh, these little boxes were being told to span four. Now they're getting told to span six. Okay, so six and six equal 12.
Then I get down here, these boxes now are being told to span 12. So that's one part where bootstrap and media queries are playing around with the structure or playing around with the column widths, depending on the size. Another distinct part is when the CSS gets activated, okay? And changes the style. So instead of staying, uh, changing the structure, it changes the style of, say some of these CSS classes. You can see here there's an H one and it's nice and big when it's a desktop, but when it gets down to say, uh, mobile, you see it's a lot smaller.
And it's a way of telling the CSS use the exact same media queries. But instead of changing things like the column width, we are changing the size of the font. So we're gonna separate those in two separate videos just to make sure that they're clearly different and uh, we'll work on them separately not to get them muddled up.