How can I make the bottom wrapper show on tablets and mobile devices in Webflow? I have applied SVH to the hero section, but it is still being clipped on an iPad (10") and is completely invisible on an iPhone (8). Any suggestions?
TL;DR
- Set hero section to min-height: 100svh instead of 100svh to handle dynamic browser chrome.
- Ensure overflow is visible, positioning is correct, and bottom padding is added for mobile breakpoints using Webflow's responsive tools.
You’re experiencing layout issues due to the use of SVH (Small Viewport Height) on the hero section, which can behave inconsistently across tablet and mobile browsers. Here's how to ensure the bottom wrapper remains visible.
1. Avoid Using 100svh Alone for Hero Sections
- SVH (Small Viewport Height) can cause content to overflow or be clipped on mobile browsers that hide UI bars dynamically.
- On some devices, especially Safari on iOS, setting hero sections to
100svhdoesn’t account for browser chrome (address bar, toolbar).
2. Use Min-Height Instead of Fixed Height
- Instead of setting your hero section to exactly
100svh, set it to min-height: 100svh. - This allows the section to grow if the content (like a bottom wrapper) exceeds the small/dynamic viewport height.
3. Check Overflow Settings
- Select the Hero Section and Body and ensure both have:
- Overflow: visible (or auto), not hidden.
- Hidden overflow can clip the child wrapper elements unintentionally.
4. Ensure Z-Index and Positioning Are Correct
- If the bottom wrapper is absolutely positioned, it might be fall outside the visible area.
- Ensure:
- Bottom wrapper has
position: relativeorstaticunless specifically needed. - The wrapper is not assigned a negative z-index or covered by another layer.
5. Add Extra Spacing with Padding/Margin
- Add a bottom padding (e.g., 20px–50px) to the hero section on tablet and mobile breakpoints to create room for the bottom wrapper.
6. Use Webflow’s Breakpoint Viewports
- Manually switch to Tablet, Mobile Landscape, and Mobile Portrait breakpoints.
- Inspect your layout live using Preview Mode, making sure the wrapper is not being hidden due to display or overflow settings.
7. Test with Real Devices or Responsive Mode
- Use browser dev tools (e.g., Chrome's Device Toolbar) and real devices to verify visibility and scroll.
- Sometimes viewport units behave differently between emulators and actual devices.
Summary
Set the hero section's min-height to 100svh, check overflow and positioning, and use Webflow's responsive tools to preview and adjust padding or layout on mobile breakpoints. This ensures the bottom wrapper remains visible and inside the scrollable viewport on all devices.