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.4 700px Breakpoint

Hey, welcome back to Responsive Design in Adobe XD. We're carrying on with our process of setting up art boards to represent each one of the break points that need to exist in our layout. This is our 900 pixel art board, the last one that we made, and now if we start to continue shrinking things down, you can see that things are getting a bit too cramped down here in the main section. At this point, there's really not enough room anymore to have these two columns and have the content of them be legible in both those columns. So what needs to happen here is we need to discard a column and start stacking this content one item on top of the other. So what we wanna do is take Our left column, expand that out to be full width and then take our right column, put that down underneath and expand that out to be full width as well. So we're gonna do that at about 700 pixels. In this case actually we'll just reset this art board back to its 900. And then we'll repeat that same process, hold down Alt, drag the art board out, and set its width to 700. Now if we take a look at our main section here, we'll just temporarily hide our right column. And what we're gonna do here is just drag the width of this column out. So that's basically the easiest way that we have to just turn this into a full width column. And then we're going to need to actually increase the height. I'll just rename this to 700 while I'm here. Turn off responsive resize, and I'm just gonna drag out the height here so that we've got more room. And now we can grab the footer and just move that down out of the way for now so that we can turn our right column back on. And move this down here, so that it can be placed underneath what was the left column. Now you can see that that looks a little bit funny here. We probably don't need a whole full-width column for each one of these items. So instead, what we're gonna set up is a two-column layout for these items, with three items in the left column and three items on the right column. And to do that, what we can actually do is use that repeat grid functionality again. Just jump in here and delete all of these items except for the first one. And we're also going to drag out the size of our div to make more space. Make this about half of the width in here. This is just a rush job just to show you the general idea. You'll need to do this little bit more carefully in practice and then you can just use repeat grid. You get your, 2 by 3 layout. And then like we went through before, you'll need to ungroup those and turn off responsive resize to make sure that they work properly. Then once you've adjusted everything here then you can bring the footer back up to sit flush with the bottom of the section of the site and you can adjust the overall height of the rapidive rectangle and the art board. When you've done that, you're gonna get something that looks like this. Okay, we've got our main section is full width now, and photo is back aligned with everything. And then I've also gone through here and once more adjusted all the aspect ratios, the text boxes, etc, etc. And the other thing that you'll notice here is that compared to the previous break point, the text size has been adjusted because once we started getting down to this 700 pixel width, you can see that this heading here is a little bit too chunky for this amount of space. It's taking up too much area, and the same with this text here. Most of these headings are a little bit too big. So we've gone through and reduced the heading sizes of all of the headings and, like I mentioned before, each one of those text sizes has been added in here as a character style. So that finishes up the 700 pixel break point, I'll see you in the next video for the 500 pixel break point.

Back to the top