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. Turn off responsive resize, and I'm just gonna drag out the height here so that we've got more room. I'll just rename this to 700 while I'm here. And then we're going to need to actually increase the height. So that's basically the easiest way that we have to just turn this into a full width column. And what we're gonna do here is just drag the width of this column out. Now if we take a look at our main section here, we'll just temporarily hide our right column. And then we'll repeat that same process, hold down Alt, drag the art board out, and set its width to 700. In this case actually we'll just reset this art board back to its 900. So we're gonna do that at about 700 pixels. 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 what needs to happen here is we need to discard a column and start stacking this content one item on top of the other. 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. 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. 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. Hey, welcome back to Responsive Design in Adobe XD.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |