Tablet and Mobile Layouts

[00:00:00]
>> The next thing we need to do is get our page ready for tablet and for mobile dimensions, because, as you know, this site looks absolutely fantastic when we're looking at it at large dimensions here. Hey, totally awesome. But as we make this smaller, our pictures get smaller, things get smushed together, and it's just not nearly as pretty as it used to be.

[00:00:23]
So we need to modify our display with some media queries. So let's go ahead and add those now. And you can continue to follow along with me, working with the same CodePen that you have been working on. Or if you take a look inside of the website for the class, you can find a second CodePen.

[00:00:49]
Beginning CodePen here for your tablet and mobile layouts here and an ending CodePen for that if you've managed it, if you've gotten lost along the way. Okay, so what we're going to do now is we're gonna need to put in some more media queries that are going to make these items start to Stack.

[00:01:10]
So what I'm going to do here is I'm going to add an apt media query inside of my we're just continuing on to add to the layer of projects. And for my media query, I'm going to say max-width, 992 pixels, which was determined by, as you know, just scrubbing back and forth here and saying, well, where does it stop looking quite so good and picking a spot?

[00:01:48]
So I happened to pick 992 pixels, because that's what worked for me. And so as you and right now, I'm looking at it around 936, so you see that my words here for advanced CSS layouts have started to sort of scroll off the picture. It's just not looking as good as it did before.

[00:02:09]
So this is how I chose this. And so what I'm going to do is I'm going to go to top grid, okay? Which remember top grid we had worked with before, and we had told it to make us two columns. One is two fractions wide, and one is one fraction wide.

[00:02:26]
Well, what I'm gonna do with top grid now is I'm just going to say display block. In other words, I don't want any grid at all, just stack everybody on top of each other. There they are, make sense? Does it like the easiest solution that's here at all?

[00:02:44]
But when you do this of course, there is no space in between these particular items. So you are also going to need to add some space. So for top grid figure, so at the bottom of each of these figures, we can say margin hyphen bottom, maybe something like 4rem.

[00:03:02]
You could go with 2rem, too, that would be fine. But for whatever reason, I thought 4rem was a nice number, okay? So pretty simple there they are all stacked on top of each other, how cool is that? All right, nice and straightforward. Now, the bottom grid is going to be interesting [LAUGH].

[00:03:23]
So, what we have here with the bottom grid, remember, on the desktop layout to the desktop layout, while the desktop layout, we just have our five icons all next to each other straightforward. But when we get to our tablet layout, our designer friend said, hey, why don't you do this?

[00:03:44]
[LAUGH] To what you said, cool. [LAUGH] Okay, well, here's the thing. With grid, this is not gonna be possible. Can anybody guess why with a name like grid, why this might not be possible,
>> Because the second row is overlapping?
>> Correct, cuz everything shifted over in the middle here.

[00:04:12]
If it's a grid, it's a grid. They should be on top of each other, right, and all lined up. But this is the middle of these images is lined up with the gap on the top row here, okay? The only way to achieve a layout like this is with Flexbox, okay?

[00:04:31]
Flexbox can do this, grid cannot. So that is what we're going to do here is change bottom grid to display is Flexbox instead. So we'll say bottom grid, Display flex, which is how, fortunately, the markup is exactly the same with parents and children. We just now need to change this to display as Flexibox and flex-flow row wrap, And it would take a quick peek at how this is going here.

[00:05:12]
Not very well so far, okay? Then we're going to say justify-content center, and we're gonna say align content center, and we're gonna give it a gap. And we're gonna give our gap two numbers, 6rem and 2rem. 6rem will be in the row in between. So we'll have a bigger gap in between the row of three and the row of two.

[00:05:43]
And the 2rem will be the gap in between each of the images. Now, if you take a look at this, it's still gonna look kind of awful, at least they're centered. But it's really not very pretty yet, okay? And the reason why is, we have told Flexbox to put these all together.

[00:06:00]
But we haven't told the Flexbox how wide to make these. Remember, we talked about the difference between width and flex-basis. So what I need to do now is tell bottom grid, And we can just say the children of bottom grid, all of them. We want them to have a flex-basis of 30%.

[00:06:28]
So 30%, obviously, like times three, is 90%. So that gives us a little bit of free space that will help, set up our gap, right? So there we go, boom, it just magically appears. As soon as you set up that flex-basis to be 30%, they just appear in the right configuration, how cool is that?

[00:06:54]
Okay, so then, the one thing that's missing now is if you notice that bootcamp icon there, It's a little bit shorter than the other icons that are around it. And remember, we applied a little formula to get all of our images to be the same size. And then applied to our top grid, but it's not applying to our bottom grid.

[00:07:13]
So let's apply that to our bottom grid. So we're gonna say bottom grid, IMG. And we're going to do this again, object-fit, cover, width, 100%, and height, 100%, Okay, And then, they'll all be nice and pretty in the same kind of dimensions, Isn't that amazing, So it's gonna go from that perfect, lovely, five-across, all same-size image.

[00:08:01]
And then, it's gonna go to the three and the two and it looks good, okay? Questions on that so far, I'm sorry, so if I-
>> We have three and two, right?
>> Yeah.
>> Keep moving smaller you have two and three.
>> Yeah, well, because I set my flex-basis to 30% here, so the size of each of these children is now 30%, you won't actually, I mean, at some point, they do, in fact, wrap out like this, okay?

[00:08:36]
Which is also, still looks very attractive. And as we get smaller, eventually [LAUGH], but they're 30% still, and that's why they're so tiny here. So, we're now definitely beyond the point where we need to make some modifications with another media query. Make sense, yeah, okay. And so my next media query is at 667 pixels, and 667 pixels is, 667, right around in here.

[00:09:14]
So it actually is going to go to this 2 across, 2 rows of 2 plus the 1, before we go to our final media query. I'm actually fine with that, as I said, I think it still looks fine, and that's ultimately what we are concerned about. If that bothers you, you could make this go stack on top of each other sooner.

[00:09:34]
So it's a design decision. All right, so with our media queries here, we have our first media query. We're gonna add another media query @media, and this will be max-width, 667 pixels, So here, sorry, bottom grid will have a gap of 2rem. So that's the first thing that we need to do.

[00:10:12]
Make sure that our gap is got kinda big there. Remember, we had, I think it was like a 6rem gap in the row, and they were kinda spread out all over the page. Now, I'm setting the gap to an even 2rem for all of those. And then for bottom grid a, in other words, the links, right now those are set to 30% each, okay?

[00:10:36]
Which is why they're still in this configuration. I'm now gonna set my flex-basis to 80%. So in other words, make take over most of that particular area and fill it with the picture, so there it is, okay? And obviously, as we make it smaller, it continues to look better.

[00:10:58]
Now, let's take a look at the top grid here, Let's see, yeah, because I did the top grid on tablet, but I did not do the top grid on mobile. So a few modifications, so we wanna make on the top grid on mobile. And so what we're going to do is, 4 667 pixels here.

[00:11:35]
For top grid figure, let's put a margin-bottom of 2rem, okay? So in other words, we're just continuing to tighten a little bit of space here. It was larger, I think it was 4rem at tablet, so we're just tightening this up a little bit here and particularly to match the images that are going to come after, The other thing is projects that I am proud of gets a little bit big at this particular screen dimension.

[00:12:09]
So I am going to add to this a section-projects h2, and I'm gonna change my font-size to var h5, And these figure captions, once again, the CSS projects text and advanced CSS layouts, these titles, get a little bit big, so we may wanna reduce those as well. Figcaption h3, font-size, var base-size.

[00:12:47]
So let's make them a little bit smaller, And so that's great. That looks much better now, when we get down to these mobile dimensions, okay, So really, when you, as you're working on tablets and you're working on mobile, it's really just taking a look at these pages and looking at them by eye.

[00:13:13]
Part of the reason that I love working in CodePen here for this is that I can scrub this back and forth and know exactly where in terms of the width of the screen that I look at got it and I go, that just doesn't really look good anymore.

[00:13:27]
What is that particular width of the viewport at that point in time? So that's a very convenient way to work on these particular issues and then decide where you want to put your media queries. One of the things that happens with a lot of the frameworks is that those media queries may be preset for you.

[00:13:45]
And so you don't have this luxury of customizing all these particular areas without writing additional custom code to go with that particular framework. So here we are able to customize this and make it absolutely perfect for this particular design rather than just sort of a cookie-cutter solution that may or may not work with this particular design,