Landing page tutorial — Hero section responsiveness (Part 3 of 12)


So far we’ve created our heroes section. Let’s make it responsive. So let’s click and drag along the edge to
test fluidity and responsiveness. We can go down to tablet and do the same thing
here. So far on desktop and tablet it looks fine. On mobile portrait though, things start to
get a little cramped, especially as the viewport gets more narrow. There’s a solution. We can use grid to make this responsive. So we’ll select grid, and from there, we’ll
add another row, and when we do that we can drag any of our content to resize. So for this divblock right here, we can grab
along the edge and drag down, and do the same thing on the top so we’re simply moving
that content down to that cell. Same thing with this phone, just drag, now
its huge, resize it one last time, and everything fits in the leftmost column. To reduce the size of the phone a little bit,
let’s set a maximum width, let’s set it to something like two hundred pixels, and
that keeps it more reasonably sized. We also don’t need that right column anymore. So under columns we can just hit delete. Now what do we do about getting everything
centered? There are multiple ways to do this, but we
want this iphone to appear in the center. So we can select the parent, the grid parent
itself, and affect all its children at once by selecting children and center. That centers the content. And we can mix other properties, like text
alignment, we can align everything right to the center. As we resize it responds to the device width
as we’d expect. The real question is how does all this look
in mobile portrait? Well things are a little more cramped. Our buttons still have that right margin and
they’re stacking so let’s set that to zero so it centers, and we can set the width
to 100%. Lower margin will help us push off from the
bottom so there’s some space there, and one last thing to note, the container itself
has no padding. If we go back to mobile landscape, we can
add some padding there so it’ll affect mobile landscape and mobile portrait. So we have ten pixels on both sides now. Now the container is providing breathing room
for all the content inside. Tablet remains unaffected, it only affected
the mobile breakpoints. Now what about our viewport height? We set 100 VH but as we resize we can note
something here: things are getting scrunched off the screen. That’s because regardless of the sections
content, its height is being set at 100 VH. We did that back in desktop. If we select that section we can click to
remove 100 VH. We can remove this style altogether, and instead
set the minimum to 100 VH. And what this will do is it will still respect
the content inside, but if the viewport isn’t tall enough it’s not going to clip the content. You can see as we scroll this section respects
the content inside. But it’ll also never get shorter than 100
VH. That’s using minimum to set VH. Responsiveness looks pretty good but we’re
seeing some overlap on the top with the phone and the logo. We can use a lower navigation to select our
grid, this is the parent, and we can affect padding and margin on that. So we’ll add some padding on the top to
push everything down. Maybe we also want to adjust the maximum width
of the image. We can set that maximum and continue to make
adjustments to the padding and the margin. So the heading if we decrease its size and
its line height we can see everything’s looking a little more reasonable on mobile portrait. Its not taking up as much space in a very
limited real estate view. Continually tweaking to make sure everything
looks just right. Something to note though with our sections,
if we go over to tablet, it looks fine centered but starting here it might be easier to select
the section itself and align everything to the top. Then just push off with padding on the inside
of the section. If we look at mobile portrait here, it looks
a lot better. Test responsiveness again, and maybe make
an adjustment to the heading. We see a little bit of extra margin, so we
can remove the margin, make it zero pixels on mobile portrait. Now that we’ve created our hero section,
and now that we’ve made it responsive, we can publish. Seriously, this can serve as a landing page
already. You can stop here, but we’re going to continue
building the full page, starting in the next video.

3 thoughts on “Landing page tutorial — Hero section responsiveness (Part 3 of 12)

  1. for the life of me I can't resize the text element like you do at 0:36 – I can extend it to the second row but I cant pull it so its only in the second row, there's no drag marker

Leave a Reply

Your email address will not be published. Required fields are marked *