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?

Your bottom wrapper is being clipped on tablets and mobile because using 100svh (small viewport height) can miscalculate available vertical space, especially on mobile browsers where the address bar dynamically appears and disappears.

1. Understand the Issue with svh

• svh (small viewport height) is an attempt to address issues with 100vh, but it's not yet fully supported or reliable across all browsers.
• Mobile and tablet browsers often include dynamic UI controls (like toolbars) that alter the true visible height, causing sections styled with 100svh or 100vh to clip content.

2. Use min-height Instead of svh

• Instead of setting the hero section to height: 100svh, apply min-height: 100vh.
• This allows the hero to stretch while accommodating content below (like the bottom wrapper), even when the screen height changes.

3. Check Overflow and Z-Index Settings

• Make sure the hero section or parent container doesn’t have overflow: hidden—this can prevent lower elements like the bottom wrapper from being visible.
• Ensure the bottom wrapper’s z-index isn’t being overridden or hidden behind other elements.

4. Confirm Visibility in Lower Breakpoints

• Go to the Tablet and Mobile breakpoints in the Webflow Designer.
• Select the bottom wrapper and confirm:
• Display is set to block or flex (not set to Display: None).
• Position is relative, absolute, or static—avoid fixed unless intentional.
• No negative margins or translations are pushing it offscreen.

5. Consider Using 100dvh (Dynamic Viewport Height)

• If you're targeting modern browsers, try using height: 100dvh via custom CSS to dynamically calculate space without UI elements like address bars.
• Add this rule in your Page Settings > Custom Code > Inside <style>:
• Example: section.hero { height: 100dvh; }
• This works better than svh on devices like iPhones running iOS 16+.

6. Use Spacer or Scroll Anchor

• If the bottom wrapper is meant to appear after scroll, consider adding:
• A scroll indicator inside the hero section.
• Or a spacer div at the bottom of the hero to reveal the wrapper as users scroll.

Summary

Replace 100svh with min-height: 100vh, check overflow settings, and make sure that the bottom wrapper is visible on all breakpoints. For optimal mobile behavior, consider custom CSS with 100dvh to better handle dynamic UI overlays.