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 "Responsive Images Exercise Solution" 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 demonstrates her code solutions to the challenges of this exercise.

Get Unlimited Access Now

Transcript from the "Responsive Images Exercise Solution" Lesson

[00:00:00]
>> Jen Kramer: As always, it's web design. So there's lots of different answers that are possible. These are the answers that I came up with. You may have something different, and they may be absolutely, totally right as well. So what I had asked you to do as part of the wrap-up portion of the flexbox portion of the day, was we had done two things just prior to that.

[00:00:21] One, we had laid out an image gallery using flexbox, and we had taken a look at some responsive images. And so, what I asked you to do to finish things up was to create a gallery page, a history page, and if you had time, also a homepage for the website.

[00:00:41] And so we'll go ahead and take a quick peek at those. All right, so on the history page, the thing that I had asked you to do is to take the image that we had here of Merilee and swap that out for different size images at different dimensions.

[00:01:00] And you did that using the picture tag and using different size images that you went ahead and created, and the Picturefill polyfill. So if we go on ahead and narrow down our web browser here, you'll see that the size of this picture will change at the various breakpoints.

[00:01:17] There we go, smaller picture at that breakpoint. And then finally a much smaller image here for mobile dimensions. And if we take a look at the code to do that, it should look pretty familiar compared to what we did yesterday. So here in history.html you can see that we have those script tags that are running from lines 8 to 12.

[00:01:40] That includes the little bit of JavaScript that tells the browser what a picture tag is if it doesn't happen to already know. And then a line that calls the Picturefill script, and that is on line 12. And then as we scroll on down the page here, if you go to line 33, this is the bit of code that calls the picture tag, which is an HTML 5.1 tag.

[00:02:09] You'll see that I gave it a class of float right, so that's how I'm floating that picture, no matter which version of the picture that I display, whether that's one of these source tags or the final image tag. They'll all be floated right. So you'll see that we'll call the different sized images here, they're associated with the appropriate media queries as to what should display on the page.

[00:02:30] And by default the last image is the mobile friendly version of that image. Okay, so that's the history page. On the gallery page,
>> Jen Kramer: This is very similar.
>> Jen Kramer: We'll open that up in the browser. So here's the gallery page. And what I've got going on here was I took that same design that I had from the history page, dumped the right column so that this is more of a full width.

[00:02:58] And then I went ahead and put my flexbox based grid system right on inside of the pie gallery. So you see here, we have lovely images on all the various lines. And as you shrink this down, we go to two images across, and then finally one image across.

[00:03:18] And so the code for that, if we take a look at gallery.html. You'll see I just copied in my list that I already had created. We went through this as an exercise yesterday in chapter five. And I copied that HTML so I didn't have to retype it all.

[00:03:36] And the only little change that I made is up here in line 28, I gave it a class of gallery. So in my example in chapter five, I use just the HTML tags themselves to lay out this particular image gallery. But with the addition of this class, when you take a look at our CSS styling, and if you're looking at the end file for that, it starts around line 84.

[00:04:00] You'll see that I have just used that one class and associated it with the various tags that are in that list, via descendant selectors or sort of a combination selector there on line 85. And then that way it can keep the code really super clean, only adding one class.

[00:04:19] I didn't have to put a separate class on each LI or all the figures or anything like that. So that's how I did that. And then finally we have a home page. And the home page, I didn't give you any art direction on the home page at all.

[00:04:35] I said if you have time and you happen to look at the branding folder that has the content inside of it and pictures and so forth, feel free to go on ahead and put together a home page. So I created one of these, Homemade Pies for Every Celebration.

[00:04:50] I used the picture of all the slices of pie as a little background banner here. And then using the background image techniques that I talked about yesterday afternoon, I went ahead and made that appear. And you can see that that image size does change part way through here as I shrink the screen down.

[00:05:09] And it's since it's a background image, of course, what it will do is just simply crop off the part that doesn't display. Which is totally fine, you're not really losing anything. And then at mobile dimensions it doesn't display at all. And then down here on the bottom, of course, I've just got some little boxes based on that same grid system that we've worked on previously.

[00:05:32] So are there any questions on the type of thing that I put together here? Anybody have any questions pertaining to flexbox, flexbox grid systems? Anything else lingering from yesterday? Sure, so we had a question here in class about min width and with flexbox. So Amy's question was that as pages get wider and we wind up with flexbox doing it's thing, being flexible.

[00:06:03] At some point do we need a min width somewhere along the way? And that's really a question of design. You can do that, or not. As you can see in my pages that I've built here, I put a min width on a wrapper for the whole page. So this particular design can only get to 1200 pixels wide.

[00:06:21] If you were to remove that then this page would scale indefinitely. And so I made the art decision to keep the size of my page to a minimum. You don't have to do that. In terms of, so I never think that's a bad idea by the way. I think that that's an art decision that you can make based on the kinds of browsers that you're using, levels of accessibility that you might need to maintain, the types of the devices that you need to support.

[00:06:49] There's a whole lot of factors that would play into whether you would do that or not. If you were putting min width on individual grid cells, I don't necessarily think that's the best idea in the world. I you can probably better handle things with a min width on an outside container.

[00:07:04] But that's just my opinion. I think, technically speaking, there is nothing wrong with putting that min width wherever you want. Technically speaking, it should work okay. But I think I tend to be more of a code minimalist, and I tend to put things abstracted away as far as possible as you just saw in that image gallery.

[00:07:27] Use one class where possible rather than repeating the same classes over and over again. Take advantage of the cascade and inheritance in order to keep cleaner and more maintainable code, that tends to be my style.