Streaming live at 10am (PST)

Help with responsive height


#1

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!


Here is my site Read-Only: https://preview.webflow.com/preview/luxeronelockerquestionnaire?preview=9f39e98ca51a8ae9db9dda59f7b8dacc


#2

You got it fixed I presume? It’s just form elements.


#3

No this hasn’t been fixed. You’re the first person to comment. See screenshot attached here to see what I am talking about.


#4

Okay, let me go to that preview link again… I don’t think I see the problem… Ok, I see it now… let me try to work on it a sec.

Are you sure, I see the form and moved it down to tablet, mobile, but it’s fine in the browser.

Ooohhh I see the bottom button… okay 1 sec


#5

Change “next” class position from absolute to auto.
“cover the form content” - why? Read her about “normal flow”(Or google it)

  • didn’t see any scroll problem

#6

Okay, now I see the issue.

  1. 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.

  2. Form Wrapper layer:
    This can be flex, again remove all the sizing, just horizontal justify center, align center

  3. 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 :wink:


#7

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.


#8

Did you want the previous button shown? Why is it hidden? Can you say what’s going on with it.


#9

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.


#10

Hey contact,

@SidneyOttelohe, @twhitt14, @AlexN. They all have created this exact same form interaction. I believe they’ll be able to “Replicate” what you’re experiencing.


#11

Hey guys I am still having the same issue with the next button overlapping the form content. Please help!


#12

Send a message to those individiuals I listed - to their profile.

And please republish your read-only link for them.


#13

Thanks Gary. I have fixed the issue but have created another. The form is remaining the height of whichever slide is longest. I want it to adapt so that it fits whichever slide it is on and not leaving a bunch of space between the form content and the form button. Here is the share link: https://preview.webflow.com/preview/luxer-questionnaire-2-0?preview=6fa4b272df602e0b4cb572f47752b818


#14

Corrected share link: https://preview.webflow.com/preview/luxer-questionnaire-2-0?preview=fd0154de7eec0472375e576ea68c53f5


#15

Oh so you need the pagination button to move up with auto-height when there’s white space from minimal content?


#16

Yes that is correct! I want the button to appear just below the end of the form content.


#17

Hey there!

Okay you really have 2 options as ‘tweaks’, so you don’t have to build things again, just adjusting to the layout :smiley: I’m sure that’s the goal, right?

  1. Create auto-height divs that scale based on the content size.
  2. 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 :blush:

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.

What are you’re thoughts on this?

That took all of 2 seconds to add - chose the same class - and centered… :grin:


#18

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.


#19

Ha, no not a dumb question, there’s no such thing :grin: 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. :mage:

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?


#20

Hey @blackrivercreative,

Check this out https://webflow.com/website/Multi-Step-Form - Clone it and see how it’s built :slight_smile:

All the best,
Naweed