How can I fix the issue with the form in Webflow where the keyboard pushes the content up and out of the screen on mobile devices?
TL;DR
- Avoid using
100vh; use100dvhor dynamic heights via custom CSS or JavaScript for responsive layouts. - Prevent fixed elements from being hidden by the keyboard by using relative or sticky positioning and adding bottom padding.
- Enable scrolling with
overflow: autoon wrappers and use.scrollIntoView()on input focus to maintain visibility. - Always test on real devices to ensure consistent performance across mobile browsers.
When using Webflow forms on mobile, it's common for the on-screen keyboard to push content upward, causing layout shifts or hiding key elements. Here's how to address it.
1. Use 100vh Responsibly
- Setting a section or container to 100vh height can cause issues on mobile because mobile browsers don't always account for the keyboard height in the visible viewport.
- Instead of 100vh, use 100% height or min-height with a custom calculation — for example, use
100dvhin custom CSS (see Step 3).
2. Avoid Fixed Positioning Near the Bottom
- Elements like buttons or nav bars fixed to the bottom can get overlapped or pushed off-screen when the keyboard appears.
- Change positioning to relative or sticky, or provide margin or padding at the bottom to compensate.
3. Add Custom CSS with 100dvh or JavaScript Workaround
- Webflow’s native
100vhis not dynamic to device UI changes. Instead, add this custom CSS via Page Settings > Custom Code in the header or embed: - Use
height: 100dvh;(modern browsers support this) on sections meant to fill the screen. - Alternatively, apply height using JavaScript that dynamically adjusts the section height based on
window.innerHeight.
4. Enable Overflow Scrolling
- Make sure the affected container (usually a form wrapper or body content) has:
- overflow: auto or overflow-y: scroll so the user can still scroll when focused inside a form field.
5. Ensure Critical Elements Are in View
- On mobile focus, the browser may not auto-scroll or may scroll excessively.
- Use JavaScript to force specific elements into view on input focus. Example: scroll the input’s parent into view using
.scrollIntoView({ behavior: 'smooth' }).
6. Test on Real Devices
- Simulators may not accurately reflect keyboard behavior. Test on actual iOS and Android devices to confirm layout integrity.
Summary
To prevent the Webflow form layout from breaking on mobile when the keyboard appears, avoid using 100vh, use 100dvh or dynamic heights, enable overflow scrolling, and test on real devices. This ensures your input fields and call-to-actions remain visible and accessible.