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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.2 1000px Breakpoint

At 1000px wide, we find the first spot our layout starts to break, and here is where we’ll design for our first breakpoint. We see the main section sidebar looking a little cramped, so we’ll correct for that. We’ll also adjust other elements to suit this width.

4.2 1000px Breakpoint

Hey, welcome back to responsive design in Adobe XD. We're now about to go through a process of demonstrating what a series of Bright Point app words can look like in practice. So we're just working with our Y-frame layout that we've been looking at so far during the course. And as I mentioned in the last video, what we're doing is just gradually shrinking down the layout and then looking for the points at which the layer is no longer really working very well. And the first place that it jumps out at is around this width where there's really not enough room for these elements in the sidebar anymore. And for the sake of just keeping things round, I'm gonna say that that's 1,000 pixels, cuz that's near enough. So I'm gonna undo that width change, and then the process is gonna be just to hold down the Alt key and then drag this art board over so you can duplicate it that way easily. Rename it, we know this is gonna be 1,000 pixels wide. So then that will help to communicate to the coder that that's where that break point needs to be in the CSS. And then we can make sure that responsive resize is active and change the width to 1,000. I accidentally shrunk that too much, I'm just gonna put that back to 1,200 so we're preserving that Bright Point layout too. So now here is where we can start to implement those adjustments that we talked about. So down at the bottom here in order to make more space for this sidebar, you wanna increase the size of this column and decrease the size of this column. And because we set up our fake divs over here, the process should be relatively straightforward. So now because of the way that we have everything set up, what I can actually do is just select the group for this left column. And I can just reduce it's width. So I can just shrink that down to 600 pixels. And then that's to reduce the size of everything inside the group as well, then I can do the same thing with the right column group. We took 50 pixels away from the other column, so we're gonna add 50 pixels to this column, bring that to 300. And then to move 50 pixels to the left I'm just gonna hold down Shift and hit the arrow key five times. So then that has given us a lot healthier amount of space for these items that are on the side bar. So this is the main thing that needed correcting at this first break point, just a pretty simple adjustment. And then the other thing that's gonna have to be done is just going through and making adjustments to things like the aspect ratio of this image so that we square it off again. We need to make sure that text boxes show all the text inside them, fix up these images, their aspect ratio and then the same thing down here. Just making sure that all of that text is showing in there as well. So when you've gone through and done that you're gonna end up with a result that looks like this. So if we go this is our 1,000 pixel break point art board. We've got our wider sidebar, and everything else has been updated and corrected. All the text is showing. The aspect ratio of the images has been updated. So now that shows the coder everything that they need to see to know how this design should look at 1,000 pixels of width. Now we're ready to move on to the next break point which is gonna be required at 900 pixels, and I will show you why in the next video. I'll see you there.

Back to the top