And then we're going to start having some media queries, so
the first one is min width is 1200 pixels.
Which means that if the display, the device display,
is larger than 1200 pixels, all these styles will apply.
And notice that what we're doing is we're defining these columns and
we are marking them with lg for large and one, two, three, four and so on.
And what we're saying is every single column they should float left, so,
basically, we're going to have a float based layout.
Also gave each and one of them a boarder but, that's just so
we could see it on the screen.
And then what I'm doing is pretty simple and something that I've described before.
And what I'm doing is I'm just saying okay so, if it's a 12 column layout that
means each column is 100 % divided by 12 so, that becomes a 0.33%.
Well the two columns is 100 divided by 12 times two,
and that's 16.66% and so on and so on until we get to
column large 12 and that's going to take up 100% of the entire grid and
neither these are the styles we have defined for large screen devices.
Now what about medium screen devices?
What we're going to do, is we're going to have a range and I picked the lower part
of the range to be 950 pixels which is not exactly the standard,
bootstrap has a different number that it uses, but I just pick this for
a demo purposes because I'm going to needed to demonstrate something for
you and you’ll see that in a minute.
And again I'm listing all this classes and
again it going to be left, floating left, and again I'm giving him a boarder.
And this time I'm doing the same thing except, I'm now calling this md for
medium.
And, since these classes don't really exist outside of these media queries,
it means that I can specify for
different devices, different layouts depending on device size.
So for a smaller device, for example, specify layout expressed in md,
in medium devices columns, or
medium devices classes and for a larger device I could express the same thing.
With lg, larger devices, so I could give the same element two different classes and
I know I'm guaranteed that only one of them
will apply at times since my media queries don't overlap.
So both classes will never really be existing at the same time.
And I could define more of these media queries, but for
demonstration purposes, let's stop here and let's take a look at our HTML.
Well again, we have our h1 just to announce to the world
what we're trying to do.
And here we have one single row, and a single row contains eight divs,
it can contain eight items, eight divs.
Each one has a paragraph that says item 1, 2, 3, 4 all the way to 8.
And notice the classes that I'm assigning to each one.
What I'm trying to tell the browser is that when it is a large device,
I want only the classes with lg to apply.
And it will happen automatically since the classes with md don't exist according
to the browser, when the browsers larger in width then 1200 pixels.
And since I know that floating elements just flow to the next line when they can't
fit, I could very easily set up three, three, three, and continue to three.
So that's right there at 12 columns but
I could keep going because it's just going to flow to the next line.
It's three, three, three, three again.
So really I should have basically four of these things, right?
Three, three and three, and three, that's four columns across, however,
when the browser size, or the device size becomes smaller, and
it becomes less than 1200 pixels, or
1199 pixels and lower, I want the layout to switch to these classes.
And these classes are specifying that,
they should really each item, each one of these things should take half the screen.
So six columns plus six columns will take up the entire width of the screen.
And again another couple of six columns will take the entire
width of the screen and so on.
So as I squeeze the browser and make it narrower,
I should see that my four column lay-out, which is expressed in these threes, right?
It's a little confusing, but
it's 3 columns and there's 12 columns all together so you have 4 columns across.
So my four column lay-out, as I squeeze the browser and
make it narrower, should become a two column layout, because I'm now specifying
in a smaller device size six and six instead of three, three, and three.
Now when the browser size gets to less than 950 pixels,
none of these classes will exist as far as the browser will concern.
And what's going to happen then?
Well our divs will no longer be floated because the floating is only defined
inside the media queries which means they will behave just like regular block level
elements and they will automatically stack one on top of the other.
So as the devices get smaller and smaller, I should really have one column
with each one of these items stacked one on top of the other.
The truth be told, I could've specified that media query for
that size of the device, but, in this case, it's just a demo, and
I knew that the items will stack anyway, I just left it alone this way.
Let's go ahead and take a look at what this looks like in the browser.
Okay, so here's our three, three, three and
three layout which gives us four items across and it's just spilling over
to the next line and gives us another four items across again.
And notice if I squeeze the browser,
in fact what we're going to do is we're going to open Chrome Developer Tools.
So as I squeeze in this corner right here,
you'll see the pixel size of the view port.
And as I start squeezing the browser you see it jumps to two.
As it gets closer and closer to 1200, once it gets past 1200 pixels,
it becomes now 6 and 6 column layout, which means
that now we're taking up half the space of the entire width of the browser.
And if we squeeze past 950 let's take a look and
squeeze it past 950 pixels, right here, boom.
The items are now stacking one on top of the other, and
obviously as a pull it back apart, or pull it wider,
it becomes back to our three, three, and three layout, three, three, three and
three lay out, four times, and now we have a four column layout across.
So that's pretty cool, so it seems we're done, and
we could now serve this website to regular mobile phones.
So let's take a look at what this site looks like on an iPhone six.
And I'll go ahead and record the screen of it.
