This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.

Check out a free preview of the full CSS Grids and Flexbox for Responsive Web Design course:
The "Code Demo: Exercise Solution for Responsive" Lesson is part of the full, CSS Grids and Flexbox for Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Jen works through how to layout the code example for Tablet and Mobile formats.

Get Unlimited Access Now

Transcript from the "Code Demo: Exercise Solution for Responsive" Lesson

>> Jen: All right. Now, of course, when we start to shrink the page down, nothing changes because we haven't written those styles yet. So let's go on ahead and write those styles. What's gonna happen then,
>> Jen: First of all,
>> Jen: So let's talk about a plan here. So in our first row, we have four going across.

[00:00:23] How do we want this to look on a tablet?
>> Jen: Currently at four. We want to go to two and two, okay. In the second row, we have twos next to each other. Where would you like to have happened there?
>> Jen: You wanna stack them, you wanna leave them next to each other?

[00:00:42] Any strong preferences? I think I left them next to each other in my example but you could stack yours if you want. How about the third row here?
>> Jen: So we have a one and we have a three. You wanna stack these?
>> Jen: Okay, so we'll stack those.

[00:01:03] And then the fourth is pretty easy, it just continues on the way it is, right? Okay, so then we have now a behavior difference between this one, the first one in row three, and the ones that make up row one, right? So the individual boxes in row one are gonna grow in size to be two columns wide when we go to a tablet.

[00:01:32] But the item here in row three, the first item, is gonna grow to occupy four. So this is where my names come from. I am going to call these one col-1-2 and col-1-4. So, I'm gonna go ahead and add those here in my CSS, col-1-2, and col-1-4. So it does top sizes, they're gonna behave that way.

>> Jen: Let me also change my fabulous color up here. Col-1-4 and let me make sure I change my HTML.
>> Jen: So in my HTML,
>> Jen: There we go.
>> Jen: So in row one,
>> Jen: And then in row three.
>> Jen: Okay, and hopefully when you refresh the page everything is exactly the same.

[00:02:53] They will all have the same color as they all still have the same behavior. And then we're ready to go ahead and write these styles for our tablet display,
>> Jen: Okay, so here on my tablet, what are we gonna do?
>> Jen: Anybody have any suggestions? How should we start?

>> Jen: You all are in the after lunch slump.
>> Jen: Food comes all round. Okay, so col-1-2 and col-2 are gonna have the same behavior, right? And their behavior's gonna be this,
>> Jen: 44%. Everything else is gonna be this col-1-4, col-3, col-4, and one we haven't come to yet will be flex 0 0 92%.

>> Jen: Okay, 92% being for what? Yes?
>> Speaker 2: I don't wanna get too off track on this because you had already asked us about naming conventions.
>> Jen: Yes.
>> Speaker 2: But generally, people would stick with the boot strap column names-
>> Jen: And that's fine.
>> Speaker 2: Compared to this way?
>> Jen: That would be totally fine.

[00:04:23] Yes, absolutely. I am combining the number of aspects here so I'm not calling them specifically the extra small, small and large group systems because it's just like a lot of extra writing and so forth. I'm combining a whole bunch of things into a single classes.
>> Speaker 2: Right. I just meant column wise.

>> Speaker 2: So it's just a little confusing with the column-1 column-2 but if there's method to the madness, it works for me.
>> Jen: And that is a fair criticism. Obviously, you can call these class names whatever you wanna call them and that is absolutely fine. I'm trying to imply different than bootstrap though, so.

>> Speaker 2: Perfect.
>> Jen: Yeah, okay. So, let us refresh the page here.
>> Jen: And then hopefully, there we go, we wind up with a break point. And you'll notice that our column ones here work perfectly well. The floats, if you'd played around with your page a little bit, you might have noticed that they did not work so well.

[00:05:26] But here we're working really well. The equal height aspect is baked in because this is Flexbox. So we don't need any JavaScript in order to make these equal height. No matter what size these boxes are, no matter which box is longer the browser is very smart and equalizes these very nicely to a row.

>> Jen: There we go. All right, there we go. All right, so then the last thing is, let's think about the mobile sizes here. So right now these are all stacked really nicely on top of each other which is great but they actually have no margin in between them at the moment.

[00:06:08] So if you want that margin that's there then that maybe something to add outside of a media query. And in fact, the way I wound up writing this was, let's see, I think I just added to this particular style right here with the attributes selector. So what I have on line 38, which is the attributes selector of anything that starts with col-, I have a margin left of 4%.

[00:06:33] And I'm adding to that a flex property of 0 0 92%.
>> Jen: And so then I think that,
>> Jen: Should help a little bit. We wound up getting margins on either side here. This is the margin left. If you want margin in-between, you can certainly add more margin here as well.

[00:07:02] If you wanna have a little bit of space between your boxes, so you can add that.