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?

You're experiencing an issue where the bottom wrapper is not showing on tablets and mobile devices, likely due to how Small Viewport Height (SVH) behaves differently across screen sizes and browsers, especially on iOS and some mobile browsers.

1. Understand How svh Works

• SVH (Small Viewport Height) adapts better to address browser UI, especially on mobile.
• However, SVH is still experimental and not consistently supported, particularly on older devices or Safari on iOS.
• Using 100svh may cause elements to be pushed out of view if combined with other layout settings like overflow: hidden.

2. Test with Static Heights or Fallback Units

• On mobile devices with issues, try replacing 100svh with 100vh, 100%, or a pixel-based height like 800px as a test.
• If it works, confirm the issue is related to svh compatibility.

3. Check Overflow & Positioning Settings

• On the main wrapper or parent section, ensure the following:
• No overflow: hidden that could be cutting off inner content.
• Elements using absolute or fixed positioning are constrained within a relative parent.
• Check if the bottom wrapper is inside a scrollable container and that its parent allows children to be visible.

4. Inspect Element Visibility per Breakpoint

• In Webflow Designer, go to tablet and mobile views.
• Click the bottom wrapper and check:
• Display setting isn't set to none
• Positioning isn’t causing it to be pushed off screen (e.g., below the svh boundary)
• Z-index is sufficient and not buried behind other sections

5. Adjust the Hero Section’s Height

• If the hero section is set to 100svh and nothing is allowed to scroll, it could push the bottom wrapper out of view.
• Try:
• Reducing the hero section height on tablet and mobile (e.g., 80vh or 80%) using Webflow’s responsive settings.
• Or wrapping both the hero and bottom sections in a scrollable container.

6. Use Webflow Interactions Carefully

• If you’re using interactions like Reveal on Scroll or Page Load animations, verify that:
• The wrapper is being animated in
• No interaction is setting opacity: 0 or display: none unexpectedly on certain breakpoints

7. Preview and Test on Actual Devices

• Webflow’s preview sometimes doesn’t match real device behavior due to mobile UI elements (address bar, etc.).
• Always test on a real device (iPhone, iPad) or use Chrome DevTools with device emulation + throttled network to simulate real conditions.

Summary

Your bottom wrapper is likely being hidden due to inconsistent SVH support, overflow clipping, or unintended responsive styles. Switch to a more compatible unit (like vh or %), reduce the height of the hero section on smaller screens, and check the element's display and positioning at each breakpoint.