13.2 Mobile adaptation - Video Tutorials & Practice Problems

<v Michael>In the last section,</v> we added our first mobile media query. It's pretty simple, just this section here. And then we saw the effect it had by changing the browser window, and then also looking at this simulation of a mobile device. In this section, we're going to move more systematically through our website and look at some of the other changes we can make to adapt our site to the smaller screens that you see in mobile. So, Lee, what are some of the main considerations when adapting a site to mobile? <v Lee>What you really wanna do</v> is go through your site, top to bottom, and just look for all of those things that are out of place. Like obviously, our header needs to be fixed. <v Michael>Right.</v> <v Lee>That's clearly not working.</v> <v Michael>(laughs) Yeah.</v> <v Lee>But then there's lots of little things</v> like I was mentioning, if you have stuff that's next to each other, what you wanna do is, what you wanna do is make sure that stuff that's next to each other gets unstacked, so that there's just more room for all the contents. So the title would go up above this text here, and down in this founder section, like, this is obviously not gonna work either. <v Michael>Yeah.</v> <v Lee>It would be much better to unstack these bio boxes</v> and then have them vertically in a row. So basically, what I normally do, is just start at the top and work my way down. So the way that I set up my screen to do this, (mouse clicks) and the way that the process works is I put this over on one side, bring up the inspector. And what you do to make this work is go through and inspect items and slowly play around with the styles. So- <v Michael>I got it.</v> <v Lee>For this, you know,</v> we put a left on that of 30 pixels, that would have to go away, you know? <v Michael>Right.</v> <v Lee>But I would also wanna rethink the whole header</v> for this kind of situation, because it's taking up a lot of space for mobile. And if we wanted to add more navigational items, there's not gonna be a whole lot of room for them. So the whole thing just might need to be rethought. You know, beyond that, I then start going into the individual pages. So first one we made was gallery, this doesn't work. <v Michael>Yeah.</v> That's a mess. <v Lee>This needs to be rethought.</v> The blog, nope, same here. <v Michael>Right.</v> <v Lee>Needs some help.</v> What's going on on the post? Oh, you know, this isn't so bad but you know, it's mostly texts so that shouldn't be too surprising. <v Michael>All right, let's start with the header</v> and work our way down the way you suggested. What do we wanna do here, Lee? <v Lee>Right, so obviously the navigation is messed up,</v> and the logo is pushed off to the side <v Michael>Right.</v> <v Lee>So let's actually</v> head over to the home, just do this here and then we'll work on the home first after this. So the first thing to look at would just be inspecting the elements and seeing what's going on. So in this case, we have a padding issue that is caused by the fact that we use padding on this floated element to push the navigational links down and away from the side. So one of the things that we need to do first is remove some of the padding. So easy first one is no padding right. There we go. Just like that. You know, things already are looking up here. <v Michael>Yeah, look at that.</v> It's way better already. <v Lee>Yeah, you can actually read stuff.</v> Then the next thing we're gonna do is take a look at this top padding. You know, it's a little push down- <v Michael>Right, so that fits right here, right?</v> It's the- <v Lee>Right, yeah.</v> It's pushing away from the top of the screen. And if we wanted to add more navigational links up there, we might need a little more space. So instead of this 5.5 view height, we could use something like 2. And I just noticed, I didn't add a little bit here. So let's add 1em, so you know, basically one letter or line height of distance from the side of the screen. So now we've got a menu that's up at the top and we have a menu that is just ever so slightly pushed away from the side of the screen. <v Michael>Right.</v> <v Lee>So that's pretty good</v> but it's still taking up a lot of space, and the reason for that is that, you know, our original styling of it, we were styling it for just, you know, a desktop, which has a lot of space. We have this padding left 1em and margin left 1em. Both of these, we could drop down and we could see like, you know, what does a quarter of an em look like? And you know, that still gives us some separation but gives us a lot more space up there. So that's pretty good stuff. And then the next thing to look at would be the links themselves. You know, we gave them a font size that is fixed to the HTML font size. And it might be better to give this a font size that's actually tied to the screen width so that these end up taking up the same amount of screen space across smaller devices. So something like that. And then if we check this, you know, it's all pretty much the same at this point, gives us a nice bit of room and it... we know that it's always gonna fit. Oh, hey, look at that, Michael. <v Michael>Yeah.</v> <v Lee>Figured that out.</v> <v Michael>What's that?</v> <v Lee>Double click.</v> <v Michael>Oh, double click. Look at that.</v> It's cool. <v Lee>So there we go.</v> Yeah, I mean, that looks a good deal better. And then the last thing is this logo. You know, we gave it a left of -30 pixels and we need to undo that with a new style. We could give it a left zero, but then that's, you know, setting just as hard of a value as -30, but we can just use auto and boom. Oop, I misspelled that. <v Michael>(chuckles) Yeah.</v> <v Lee>Well.</v> <v Michael>(indistinct).</v> It's funny it worked because it was broken. <v Lee>Yeah.</v> But notice I'm doing all this in the inspector to just play around with it and see how things look as making changes. You have to always remember what you changed. So this might have gone on a little long without moving over to our actual style sheet. <v Michael>Mm-hmm.</v> <v Lee>I might, you know, move...</v> I might have copied stuff over if I was really working on this a little earlier, but there aren't that many changes here so... <v Michael>Yeah.</v> <v Lee>It's not that bad to remember what you changed.</v> And if you need to, you can always just go back and look. But we changed the header nav. (mouse clicks) (Lee chuckles) Yeah, there we go. (keyboard tapping) Oh, I'm editing in two places. <v Michael>Yeah, you get two cursors there</v> and it happens in a blind text sometimes. (keyboard tapping) So this should be it after the header logo. (keyboard tapping) And when we save all of this and refresh our screen... Yep, that looks the same. <v Michael>Cool.</v> And if we go over here just to the full one (indistinct)... it's like Option + Command + R, it's still the same because of the way we did the media query here. <v Lee>Right.</v> So it's only changing it once the screen gets to a certain size. <v Michael>Right.</v> There's one thing I wanna add. <v Lee>Sure.</v> <v Michael>Which is down here just for</v> the label's sake. I wanna put BLOG STYLES 'cause we're gonna be adding blog styles here, right? <v Lee>Yes. We will eventually.</v> <v Michael>So it will be nice to keep it separated.</v> All right, so it's going down the list, we've got to here. It looks pretty good. Do we have to do anything with that? <v Lee>No, that's looking pretty good.</v> So as we scroll down, we see that our callout doesn't look so good. <v Michael>Yeah.</v> <v Lee>Our recent blog post,</v> looking pretty good without having to do anything. Our founder section, these bio boxes are not so good. They're floated next to each other and need a lot more room. And our footer looks good. <v Michael>Yeah. Yeah.</v> <v Lee>So as far as the homepage goes,</v> we need to unstack these which are next to each other because of flexbox and we need to unfloat these, so... <v Michael>Yeah.</v> When you say unstack, it seems to me- <v Lee>I meant stack them.</v> <v Michael>To stack them, okay.</v> <v Lee>I meant un-side-by-side them and instead stack them.</v> <v Michael>Okay, good.</v> <v Lee>But we'll be using two different techniques</v> because we actually put them side by side in two different ways. So for this one- <v Michael>One of them was...</v> Yeah, this is a flexbox, right? <v Lee>Yeah, this was a flexbox.</v> So the way to fix this is pretty simple. I'm gonna copy this class here so I don't have to redo everything. (keyboard tapping) So we're just gonna use our flex-direction. <v Michael>Mm-hmm.</v> <v Lee>And make it column.</v> <v Michael>Yeah, good.</v> <v Lee>Yeah.</v> And that'll stack them but remember our content area has a flex-basis set. So when I refresh this, it's not gonna look... Oop, I forgot to save it. <v Michael>Save it, yeah.</v> <v Lee>When I refresh this, it's not gonna look right.</v> Because this is not set up to just hold the content. You know, it's got some other styling in there. <v Michael>Yeah.</v> <v Lee>So just to double check,</v> we can always select the callout copy, and see instead of this 45em over here, we could try just flex: 1. <v Michael>flex: 1, yeah.</v> <v Lee>That looks like a solution to me.</v> <v Michael>Yep, looks good.</v> <v Michael>Okay, I'm just gonna put a space in here</v> 'cause that's what I do life. <v Lee>Ah, yeah. (chuckles)</v> Missed a space. (keyboard tapping) <v Lee>So we've got that now.</v> <v Michael>Yep.</v> <v Lee>We can turn our attention down here</v> to the bio boxes. <v Michael>Yeah, we've floated these, is that right?</v> <v Lee>Right.</v> And so to undo a float, all that needs to be applied is float: none. <v Michael>float: none.</v> <v Lee>So if you wanna see how that looks</v> and what we have to do... There you go. <v Michael>Okay.</v> Now it's too narrow though, so we have- <v Lee>It's too narrow 'cause we have a set width.</v> <v Michael>Right.</v> <v Lee>And so we can undo the width with auto.</v> <v Michael>Okay.</v> <v Lee>And technically, we could use width: 100 here.</v> <v Michael>Yeah, why can't we do it width: 100?</v> <v Lee>Well, it's not that you can't, it's-</v> <v Michael>Why would we prefer, to say, width: auto?</v> <v Lee>So we're unsetting the width value here.</v> And setting it to auto means that the natural box model rules will push this display block element out to the full width of it, the wrapper that it's in. <v Michael>Mm-hmm.</v> <v Lee>Whereas, if we put it to 100%, the width,</v> that's an actual value, and then all the box model rules come into play. Where if we have padding, the padding would get added on. Now obviously- <v Michael>It's like the border-box.</v> <v Lee>Yeah. Obviously, the padding wouldn't be added here</v> because we have border-box, but it's just one of those like best practice things, where when you wanna undo something that's just a block element like this, undo a width for it, just use width: auto. <v Michael>Yeah.</v> <v Lee>And then you don't have to worry about it</v> breaking the rest of the page layout. And you know, while we're here, the fonts look a little small on mobile. <v Michael>Yeah.</v> <v Lee>So we might just kick those up a notch.</v> That's not so bad. <v Michael>Okay, looks good.</v> <v Lee>Yeah.</v> (keyboard tapping) And now if we refresh, there you go. And then scrolling up and down, you know, this doesn't look too bad at all. Looks- <v Michael>All right.</v> That's great. <v Lee>put together.</v> So the next thing that we'll have to turn our attention to <v Michael>Yeah.</v> <v Lee>is this.</v> <v Michael>And the gallery's looking pretty-</v> <v Lee>The gallery page is a little rough.</v> (Michael laughs) You can see it's still trying to force it into three different columns right here. <v Michael>Yeah.</v> <v Lee>Which doesn't work.</v> So just like on the homepage though, we're gonna take this flex layout and we're gonna do a good old flex-direction: column to stack these on top of each other. (keyboard tapping) Now when we go back over here... That's better. <v Michael>Yeah, it's a lot better.</v> <v Lee>I mean, it's almost reasonable.</v> You could almost just call it a day here, but you know, we'll do a little more. <v Michael>Yeah, right now,</v> there's no real way to see the difference between the thumbnails and the main one. They're basically the same size. <v Lee>Right, exactly.</v> You're not really getting much benefit from this other than you can scroll through these. And that works... I mean, theoretically, we could just make these a little bit smaller so we fit like, two on a screen and just say, "Oh, that's the thumb section." But like, you know, what if we wanted to make this look a little bit more appy where we have like a row of small thumbnails going across? <v Michael>Mm-hmm.</v> <v Lee>And then later when we add JavaScript,</v> you can just tap on one of those and they'll fill in the rest of this. <v Michael>Yeah.</v> <v Lee>Well, what we could do there,</v> is change- <v Michael>Is there a flexbox going on?</v> <v Lee>Huh?</v> <v Michael>I'm guessing, is there a flexbox direction?</v> <v Lee>It's not a flexbox direction.</v> We're actually gonna take advantage of some basic HTML and CSS stuff. So there's older CSS property called white-space, and you can set it to a value of nowrap. And what that does is, it forces all the child elements to stay on one line, even if normally they'd break onto a second line. First though, I'm gonna drop the padding on all of this just to give us a little more room. (keyboard tapping) Since there was a little bit more padding on it. Save. There we go. A little bit bigger. We want the images to be nice. <v Michael>Yeah.</v> <v Lee>So what we're gonna do here is</v> we're gonna make changes up here to our thumbs. And so the first thing that we're gonna do is change its flex, which you were right about that. <v Michael>Okay, so flex: 1-</v> <v Lee>But that's not the operative part.</v> So we're changing it to flex: 1 which actually gives it more room. <v Michael>Right.</v> <v Lee>And this expands it to fill the content.</v> So you see, there's no more scrolling in there. <v Michael>Mm-hmm.</v> <v Lee>Which is actually not what we want.</v> So now what we're gonna actually do is we're gonna change this so that it has no set height. Because before, we had a 90 view height. (mouse clicks) We're going to set that white-space to nowrap. <v Michael>Right.</v> <v Lee>And then we're gonna set a set width</v> for this section of 100 view width, and that's to give overflow something to work with. Like, remember you have to have... For overflow to work, you have to be setting a height or width. You just have to be setting dimensions, 'cause otherwise, the browser's just gonna resize the wrapper. So why isn't this working yet? Well, our divs in here are block level elements so if we were to change this to (keyboard tapping) display: inline-block and put them side by side, now they're going this direction. <v Michael>Aha!</v> <v Lee>You can see them.</v> It's kinda cool. But hey, you know, this still... Why would you have the thumbnails be the same size as this? <v Michael>Right, we wanna make them smaller.</v> <v Lee>Yeah. It's a little crazy.</v> So... <v Michael>So it's the thumbnails image, is that right?</v> <v Lee>Yeah, it's the thumbnails image right there.</v> <v Michael>All right.</v> <v Lee>So if we're just playing around with all of this,</v> we can set the width to auto, and a height, (keyboard tapping) much smaller height <v Michael>And probably based on the viewport height?</v> <v Lee>Yeah.</v> <v Michael>Yeah.</v> <v Lee>Just so that it's not taking up</v> that much of the entire screen. <v Michael>Right.</v> <v Lee>Since that's the dimension</v> that we're really concerned about saving on a mobile device. That's a lot better. <v Michael>Yeah.</v> <v Lee>We probably also need some margin on these.</v> <v Michael>Yeah, they're kinda right up next to each other,</v> so we want a little margin. <v Lee>Yeah.</v> <v Michael>Nice.</v> <v Lee>Yeah, I mean that's not so bad, right?</v> <v Michael>Yeah.</v> <v Lee>That's kinda cool.</v> <v Michael>Once the images are different, they would...</v> You'd see a whole bunch of different images and- <v Lee>Yeah, we should-</v> <v Michael>In fact, what if we had a bunch of images,</v> how would this scale up? Like, (indistinct). <v Lee>Yeah, let's save what we did here</v> (keyboard tapping) so that we can add some more HTML elements and then refresh the page. <v Michael>Yeah.</v> (keyboard tapping) <v Lee>Yeah.</v> (keyboard tapping) It's always... Oops. It's always a little hard to... (keyboard tapping) So that looks right. <v Michael>Mm-hmm.</v> <v Lee>Now that we've got it all in,</v> so what we can do (mouse clicks) is go to our gallery index. <v Michael>Mm-hmm.</v> <v Lee>And we've got these thumbnails and these divs,</v> we can just paste a bunch more in. And now, it's pretty cool. <v Michael>Ah, scroll.</v> <v ->So when we do the JavaScript for this,</v> you'll be able to click these and replace all of the content in here <v Michael>Right.</v> <v Lee>with new content.</v> Should be pretty cool for a gallery. Notice that we actually still have a little bit of extra space down here, <v Michael>Yeah.</v> <v Lee>Below this element.</v> And that's because we have a flex-basis set on the column aside in the gallery. We set that to 1. <v Michael>Right, flex to 1.</v> Yeah, there we go. <v Lee>We just tighten everything up so we can add that in.</v> But we should use this gallery info as the class that we're targeting. <v Michael>Just 'cause we don't wanna affect</v> all of the columns necessarily. <v Lee>Exactly.</v> Let me get rid of our thumbnails. (keyboard tapping) All right. And now when we fresh, there we go. <v Michael>All right, look at that.</v> That's (chuckles) a major improvement. <v Lee>Yeah.</v> And really, it's not that much CSS when you look at it. It's just undoing a couple things and just thinking about like, you know, what's gonna work best for a small screen where you want to have slightly bigger content and need to pay attention to the fact that vertical height of elements matters. <v Michael>Yeah.</v> <v Lee>Or vertical space that they take up,</v> stuff around them. So next... You know, we should probably take a look at the blog. <v Michael>Yeah. Did we do the index page?</v> No, we haven't. We've looked at the post, so we probably still have some stuff to do on this, I guess, but maybe not. <v Lee>Yeah.</v> <v Michael>Certainly, the index page, we need to fix up.</v> <v Lee>So we've got same thing here.</v> We've got a flexbox with two flex items that are set up horizontally to share the space. So we're gonna do the exact same thing that we did last time and we're gonna target this blog columns which is our flex container. <v Michael>Mm-hmm.</v> And we'll put this right here. (keyboard tapping) And same flex-direction. (keyboard tapping) <v Michael>This just puts the recent posts</v> underneath the list of posts. So it's still there. <v Lee>Exactly.</v> It's at the bottom. <v Michael>Yeah.</v> <v Lee>And,</v> you know, while we're taking a look at this, we've got our blog recent, <v Michael>Mm-hmm.</v> <v Lee>it's got a flex-basis and we can change that.</v> We can edit this to be flex: 1, just to make things nice and compact. (keyboard tapping) And while we're at it, you might as well just text-align: center this. <v Michael>Yeah.</v> Yeah, it looks a lot nicer. <v Lee>There we go.</v> I mean, that was pretty simple. <v Michael>It's good.</v> So is that it? Have we now done our... just our first round of changes? <v Lee>I think so.</v> Why don't we click back over to a blog post and take a look at that? <v Michael>Yeah, it's doable.</v> I mean maybe just font size, be smaller, I don't know. It looks good to me, though. <v Lee>Yeah.</v> <v Michael>All right, well, that's really amazing.</v> Just with a few rule changes. Just look at this whole thing, compared to our full style sheet, it's not very many for each page. We were able to preserve all of the HTML. All we did was change CSS, right? <v Lee>Yeah.</v> <v Michael>There were no HTML changes at all.</v> <v Lee>No.</v> <v Michael>And now we've got something that's</v> looking pretty good on mobile. <v Lee>All right.</v> There's still yet more to do though, with mobile. Just making sure that it displays correctly across all instances, we need to change a couple more things. <v Michael>Yeah.</v> Right, but this is a great start. <v Lee>Yeah.</v> <v Michael>Awesome.</v>