CSS for Tablet Layout

[00:00:00]
>> All right, fantastic. So we are going to move on here to our tablet design. So we are at section 3D that is Chapter 3 Section D, tablet design. And so I have a lot of blah, blah here. Basically what this says is, what you wanna do is you wanna take a look at your current mobile design, take a look at your tablet design, and talk about, write it down in plain English, what are the differences between these two.

[00:00:33]
We can go back and refer to those PowerPoint slides I had earlier. So let's talk about these, all right? So we have coded what is on the left-side, here. We've coded that mobile design and this is the spec for our tablet design, so does anybody wanna give me what are the differences, what do we need to think about here?

[00:00:58]
[INAUDIBLE]
>> Right, so for the tour, the actual name tour itself goes all the way across, and then we have three columns of tour dates, right? So that's one thing, what else?
>> Images are in a row instead of a column
>> We have got the images going across in a row instead of stacked in a column, okay, anything else?

[00:01:26]
>> The font is bigger.
>> The font looks, well, it definitely looks a little bit bigger, I think that's actually an artifact of the fact that we've squashed our mobile, yeah, but that was a good eye. Yes, absolutely, I can see why you think that. What else? How about that image of the guys, the Magenta line guys?

[00:01:48]
It's probably bigger on tablet than it is on mobile, isn't it? Okay, so we probably have to think about that a little bit. Okay good, so now you have those pictures in your head you know what you're aiming for, let's start coding that. And as I say here in the notes, we've talked about what changes between the layouts.

[00:02:09]
We also need to think about some of those layout changes happen within a section of the Web page, whereas some of them are the whole Web page, right? So we kinda work from inside out, so we just like we worked through here, like the tour section, we might work on that in isolation and then apply it to the larger page.

[00:02:27]
And always you can't, if you can't see it you can't style it, so put on those borders put in those background colors, so you can see what you're doing is always a really important thing to do. All right, [COUGH] so I'm gonna start with my appropriate CodePen here, the link is in the Website we can make a fork for that.

[00:02:56]
Okay, so we've got all these layers here, you can add media queries to each of these layers, or you can add a big media query at the end of the layers, whatever makes sense. I will probably put the media queries inside of the individual layers. Okay, so I'm gonna go back to my base layer here momentarily, and in here we had a Wrapper style.

[00:03:22]
Where's our wrapper style? Or we didn't have a wrapper style. We didn't have a wrapper style.
>> It's in the next layer.
>> It's in the next layer, okay, so we have this wrapper style that's available here. And the header banner tour layer, which I think I originally might have just called it header, and you'll see that we have it set to a max width of 375.

[00:03:49]
So now we're gonna talk about a larger screen, so we wanna change that, and we do that with a media query. So down here in this layer, we will add @media, that's how you start a media query, and then we will add parentheses. This is, again, part of the media query, and we can say our min-width will be 800 pixels, why this?

[00:04:16]
Why 800 pixels? This is what happens to work with the design, this is the spec that came from the designer, etcetera, etcetera. But you notice that, that takes that structure of @media, we have the parentheses and there's a test. So we can do a max-width, you can do a min-width, you can do testing for portrait or landscape, that is something you can do.

[00:04:39]
You can test for aspect ratios, you can test for Black and white versus color. There are a lot of things that media queries will test for, but generally speaking, when we're working here with layouts, we're pretty commonly doing a min-width or a max-width, make sense? Okay? Notice that with a min-width, we're seeing these tiles that are inside of this media query will not apply unless we're at 800 pixels or bigger.

[00:05:06]
So we're adding styles on to what came before which apply to everything, right? So sometimes we're gonna override what came before, sometimes we're writing additional styles that will only apply at 800 pixels, yeah? So this is mobile first, anytime you see a min-width media query like this, that is mobile first.

[00:05:29]
Pro-tip, anytime you see a max-width media query, what is that?
>> Desktop
>> Desktop first, okay, good. All right, so right here inside of this, we can put in our wrapper, and now we can change our max-width. So our max-width will go to 800 pixels, okay, and the screen mirror may not change.

[00:06:00]
Why didn't it change?
>> [INAUDIBLE] Not there yet, we are not at 800 pixel.
>> Actually it did change, we just can't see it because we have this wrapper and our styling actually works just fine at 375 pixels or lower, and you may have your screen open. If you notice down here at the bottom, it will give you a little number and tell you exactly what your screen width is here in CodePen.

[00:06:28]
Look down there by the JavaScript pane that I have minimized there, see that? So whoop, there we go [LAUGH] boom, I'm over 800 pixels now, so if your screen looks like mine, you're over 800 pixels.
>> So then when does the breakpoint come into play, and I guess I wanna know the difference between when to use media query and when to use breakpoint, and how are they alike and different?

[00:06:55]
>> They are exactly the same thing. People talk about breakpoints, that is sort of that concept of things are going to change at a certain dimension. Media query is how we implement a breakpoint, yap?
>> Is there a standard number for tablets?
>> I would look at what Bootstrap does because they're Bootstrap, they establish standards for everything.

[00:07:19]
But I think you'd find like 767, 800 something like that is usually tablet.
>> Okay.
>> But it can be whatever you want, and you don't have to have three, you can have four, you can have 12, it doesn't matter.