A hero page sizing issue

Design help General
1

Hey there! I hope you are all doing well :slight_smile:

I’m having a slight issue with my landing page/hero page. And was wondering if anyone could help me out quickly with the right settings.

I want my slideshow images to represent 65% of the page and the titles/icons to represent the remaining 35% of the page. I’ve done this by setting 65VH and 35VH.
It seems to work ok on bigger screens but when I view the page on a smaller screen such as a 13 inch laptop it cuts half the icons or titles off… What’s strange though is if I change the width within the project viewer to a 13inch it doesn’t do this…

I hope all that makes sense. Is there a better way to to make it a bit neater and with it always filling the page? or having the Hero Section Text Section just get smaller so it fits always 100% within the page?

Thanks all. See below for preview

https://preview.webflow.com/preview/nicocam-58c07d?utm_medium=preview_link&utm_source=designer&utm_content=nicocam-58c07d&preview=52f73ecd98b480c980dcd09b1dfbe4ad&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Switching to a smaller breakpoint on the same machine just simulates the width. The height is the same from the physical device you‘re sitting in front of.

There are some Wishlist posts regarding custom breakpoints and the device height.

You could try to add custom CSS code with media queries and max-height. But I don‘t know if that works in Webflow.