I made a hero section here: https://autoteilelouay.webflow.io/
I’m trying to make the same thing but with a slider with images as the background: WhatsApp
For the one with a slider, if I set the hero section height to auto it’s no longer visible, I can see my headings and buttons but not the slider images. Now I have it set to 150 VH but it’s inconsistent across different devices and sometimes leave too much space, and maybe it will be too short on others.
How can set the hero’s height to be responsive and to include the headings and buttons?
Here is my site Read-Only: Webflow - Autoteile Louay
Hi there,
When creating a hero section with a slider, using SVH (Small Viewport Height) units instead of VH provides better compatibility across devices, especially on mobile browsers with dynamic toolbars. SVH ensures your content remains visible and properly scaled regardless of toolbar visibility.
To implement this, set your hero section’s minimum height to 100svh. This approach allows the section to:
- Fill the entire viewport height
- Expand if the content requires more space
- Prevent content from being cut off by mobile browser toolbars
- Maintain smooth scrolling across different devices
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
OK I changed it to Min 100 SVH and now the hero is just too short