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.6 400px Breakpoint

At 400px, our logo no longer fits comfortably, so we reduce its size. Section one needs to collapse from three columns to a single-column layout. The section two slider will reduce to showing only two images at a time. We’ll make other text size adjustments, do some alignment changes, and rearrange the footer content into a single column.

4.6 400px Breakpoint

Hey, welcome back to Responsive Design in Adobe XD. What you're looking at here is the 500 pixel break point art board that we prepared in the last lesson. We've only got a couple more break points to go, so let's see where they need to be put. So once again, we're shrinking this down to see where it starts to break. And I'm gonna say that it starts to break fairly soon. This is something that happens as the width decreases. You're going to need a few more break points closer together at narrow widths. So here there's a couple of things that I think need to be adjusted. One, if you look at the logo here, this is now starting to be cramped, so we need to shrink this logo to make sure that it can fit comfortably. We'll fix up this alignment and everything, that's just as the housekeeping task that we talked about. There's also no real reason to keep this in two columns now, so we're gonna take these images and put them above this content. So everything in this section is all collapsed to a single column. Here, there's not enough room for three images, but I think that we can still fit two images side by side fairly comfortably. We're gonna need to make some adjustments to text sizes, again to the headings. And then if we look at the bottom, we're now actually starting to see these elements overlapping one another. So we're gonna need to take this copyright message and put it in the middle of the footer. And take this social icons and put them at the bottom. So with all that done, we end up with an art board that looks like this. So we've got our shrunk logo, everything in this section has been adjusted. Just that house keeping type of thing. We've got all of the content here is centered. So we've got the images centered, and the heading is centered. And now everything is in one big stack so that there's more room. Everything just here being reduced to two columns instead of three. And one other adjustment is here. I've centered this button instead of putting it to the left. And the reason is at this size if this button is on the left, it actually just kind of looks like it's supposed to be centered but it hasn't been done very well. So it looks a little bit more natural if it's centered at this width. And then looking at our photo, everything here is now stacked in a single column, with all of that content also being centered. And now, we are just about done. Now we're getting down into the smallest sizes that anyone is realistically ever gonna see your site at. We're already smaller than some fonts. You could arguably stop catering for devices at about 320 pixels if you wanted to. But what we're gonna do in this case is you're gonna have a look at these sizes here and pick out the smallest one which is the Apple watch at 272 pixels wide. So we're gonna put that final, smallest break point together in the next lesson, I'll see you there.

Back to the top