Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 500px Breakpoint

Hey, welcome to back to Responsive Design in Adobe XD. In the last lesson, we set up this 700 pixel break point art board. Now, let's take a look and see where the layout starts breaking down at a width narrower than this. So if we start shrinking down, And round about here. Now, this is really starting to look too cramped. I don't think that there's enough space to really warrant two columns in the hero unit anymore. So what needs to happen, here, is this image needs to be taken and put at the top of this hero unit area, and then this content should be put underneath it. We're also starting to get a little too cramped with this image slider here. There's not really enough room here for five of these images to be shown. In this concept, the idea is that the images will be sliding from left to right. So, instead, we're gonna change this up, so that it shows three images in this row instead of five. And then we're also going to treat some of the heading sizes as well. So you can this text here is looking a little bit too cramped for the amount of space in the section one heading. These column headings are also a little bit too cramped in, and this heading size, here, is looking a little uncomfortable, too. And we're also getting to a point where these columns that are in Section One are too thin. The text lines are starting to look really skinny. There isn't enough words per line. So we're gonna collapse that down as well, so that we have just one column in Section One area. And then the last thing that needs to be adjusted here is that at 500 pixels this is probably starting to get a bit cramped, too. And that could do with being collapsed down into a single column. So, as we did on all the other ones, you just need to duplicate the art board and make those changes. And when you do, you'll end up with an art board that looks like this. So we've got the image for the hero unit on top now with the content below it. So that makes it a little more comfortable for that content to fit in. We've got the reduced size heading here. And, now, we're stacking each of these features or whatever would be in this space one on top of the other. So now there's a lot more words per line, and that's gonna make that a lot more comfortable to read. And our images, here, we've reduced these down to having three visible in the row at a time, decreased the size of the heading text in the main section. And we've collapsed our two columns of little snippet items here down into a single column. So interesting to point out as well, you can see that at this point, except for these three images, here, almost the entire layout is now into a single column. So that's what we were talking about before where as you have less and less width you're going to have fewer and fewer columns until you get to the point where everything is just stacked one element on top of the other. So now we've only got two more break points to go. The next one is going to be at 400 pixels, and I'll show you what we'll be doing there in the next lesson. I'll see you there.

Back to the top