Misaligned homepage hero sections

Hello - would anyone be able to help with an issue with misalignment on my homepage?

The two hero sections are meant to be the same size and take up equal space on the page - however, the section on the left is wider, and shorter than the right - I’m not sure how this has happened, or how to fix it.

Is it possible for someone to help?

Thanks


Here is my site Read-Only: https://preview.webflow.com/preview/florence-new-site?utm_medium=preview_link&utm_source=designer&utm_content=florence-new-site&preview=0ec5b15f8123d6a5b69c48e0abea0c6f&workflow=preview
(how to share your site Read-Only link)

Hey there!

I just took a look at your read only project and it appears that the two hero sections are equal in width taking up 50% of the screen. I did notice that when moving up to larger breakpoints that the left section is in fact shorter. That is because the text in the right section is longer and maintains a line break on larger breakpoints. The left section text which is shorter does not maintain a line break and thus does not affect the height of the section in the same way the right does. This is why you’re seeing this height delta.

You can increase the max width of the “right hero content” div to allow the text to remain on one line which will stop it from creating a line break. Or, you can set a fixed/min height to hero div making if large enough to not be affected by the line break. There are more options here I’m sure but these are a couple that you can play around with and optimize for.

Perfect - thank you so much! I’ve evened out the copy so the heights remain even, thank you for describing the problem and providing options to fix!

1 Like

You’re very welcome! :slightly_smiling_face: