I am having an issue with my site’s responsiveness on height. The width is working well. When the viewport height gets smaller (like if I drag my browser window smaller or view on a phone) the next and back button cover the form content. It also does not enable scrolling to view the content missing in the viewport. Not sure what to do, please help!
First Section:
Remove that styling, move to “Block”. Typically, you won’t need any styles on Sections they’re just holding content in DOM, document model. Just like a Word document, the page is the “section” that holds the words you type, but you may center the title, then left align the paragraph, then indent the bullet points. You never style the word document page, unless it’s an index page with roman numerals for a book or proposal. If that makes sense.
Form Wrapper layer:
This can be flex, again remove all the sizing, just horizontal justify center, align center
Form Content layer:
Click “Expand” on the Flex settings. Challenge is, you have to do this to each panel in all steps.
So you’re using a slider for the form? If so, I would suggest moving the pagination outside of all the form content, and control the navigation with “Previous & Next” buttons. It’s the same as using arrows or dots. This prevents the form content from dictating styles to the navigation. And you won’t overlap.
That’s my feel for it, because I know you don’t want to recreate at this point probably
How do I move the pagination outside of the form content? I assume that is what I need to prevent the overlapping. I did your steps 1-3 and it still happens.
I want the previous button shown on all slides except for the first slide. It was working before I am not sure why it isn’t now. Also the things you listed didn’t fix the vertical responsiveness issue where the next button is overlapping the form content.
@SidneyOttelohe, @twhitt14, @AlexN. They all have created this exact same form interaction. I believe they’ll be able to “Replicate” what you’re experiencing.
Okay you really have 2 options as ‘tweaks’, so you don’t have to build things again, just adjusting to the layout I’m sure that’s the goal, right?
Create auto-height divs that scale based on the content size.
Add the next button to each “Step”.
Now, I’d favor the 2nd. Simply because it gaurantees the proper spacing and layout. And it’s just adding button and linking it to the next section. Yes, you’d need to copy it, but you can add combo class to avoid problems if one breaks for some reason.
The 1st will definitely take the most time, because you’ll need to go through each “Step” and adjust the “Block” settings. Deal with margins, padding, div size for consistency. Honestly, this concept needed consideration in the planning phase
To keep you up and running smoothly, and not stopping to make this involved adjustment, just add a button to each step, then reduce the size the button div to match the section - it’s the fastest move in my opinion.
Ok I feel like this is a dumb question but how do I simply add a button to each step? When I try to copy and paste the next button it copies the whole slider. When I create a new button I don’t see how I can link it to the next slide.
Ha, no not a dumb question, there’s no such thing There isn’t a developer on earth that can look at a site and tell you exactly what’s going on instantly. It always takes some troubleshooting through trial and error, that’s ALL it is. So we’ll figure it out eventually.
So you didn’t create this yourself right? Because this is a Webflow form inside of a Webflow slider. It’s a little confusing when investigating the structure. Are you locked into this entire form and setup?