Awkward gap around div?

Hi! This problem is probably staring me in the face, but I can’t see it.

I have two columns in my hero section that HAD been working well responsively, until I shifted everything over to a new, blank site. The right one is fine, and seems to resize okay.

Now on the left column, whatever I put at the bottom of it won’t properly fill the space - it now has an image in it (the img block div), and whatever properties (sizing/alignment) I set, it won’t fill the space quite properly.

At the moment, the parent (named hero) has absolute positioning, and the image in the left column (img block) is relative. It’s nearly there, but there’s the slightest gap, and it’s bugging me. I’ve positioned it in VW measurements, but if there’s a better way to fix this, please let me know!

Here’s the little gap, pictured. It’s only pixels, but still noticeable and annoying. I want it edge to edge inside the borders:

Again, apologies if this is a stupidly simple fix haha, I just can’t twig it. Thank you!

Here’s my site, read-only.

P.S. - if the hero section is awkwardly laid out, a recommendation for a better format for this section would be so appreciated. Thanks :slight_smile:

Hey Eleanor!

To fix your little gap problem I think all you need to do is change the positioning on the “img block” div that image is in. Right now it’s got a VH unit up top, but seems like it just needs to be set to bottom like this:

Screen Shot 2023-01-31 at 9.53.02 AM

Hope this helps!

1 Like

Ahhh this is spot on, thank you so much for taking the time! I feel silly for not being able to recognise the solution, but I haven’t been doing Webflow for too long - so I appreciate you explaining so nicely :slight_smile: have a great day!

1 Like