What can I do to fix the issue with the next and back buttons covering the form content and the inability to scroll when the viewport height gets smaller on my Webflow site?

Published on
September 22, 2023

If you're facing issues with the next and back buttons covering the form content and the inability to scroll when the viewport height gets smaller on your Webflow site, there are a few potential solutions you can try:

  1. Adjust the positioning of the buttons: By default, Webflow places the next and back buttons at a fixed position on the page. However, this can cause them to cover other content when the viewport height is reduced. To fix this, you can set the buttons to a relative or absolute position within their parent element, allowing the form content to flow beneath them and preventing any overlap.

  2. Create a scrollable container: Another solution is to create a container element specifically for the form content and set its overflow property to "scroll." This will add a scrollbar to the container, allowing users to scroll through the form content even when the viewport height is limited. Make sure to set a fixed height or max-height for the container to control its dimensions.

  3. Increase the overall height of the page: If the above solutions don't work or if you prefer not to use scrolling, you can try increasing the overall height of the page. This can be done by adding more content or adjusting the height of existing sections. By extending the page height, you provide more space for the form content, preventing overlap with the buttons.

It's important to note that these solutions may require knowledge of HTML and CSS, and you may need to access the Webflow Designer or Editor to implement them effectively.

Overall, by applying these measures to adjust the positioning and scrolling behavior of your Webflow site's form content, you should be able to fix the issue of the next and back buttons covering the content and the inability to scroll when the viewport height decreases.

Additional Questions:

  1. How can I adjust the position of buttons in Webflow to prevent overlap with other content?
  2. What is the best way to create a scrollable container for form content in Webflow?
  3. How can I increase the overall height of my Webflow page to prevent overlap between buttons and form content?