Streaming live at 10am (PST)

Issue with form height in mobile view


#1

For the life of me I cannot figure out what is overriding my form height in mobile view. It seems to work fine in firefox on my android cell phone but not in chrome or if I resize my desktop browser to mobile size. see screenshot below of how it is looking. wondering if anyone has any ideas here?


Here is my public share link: https://preview.webflow.com/preview/richlandchambers?preview=59e10ea814d408884a76cacc209b669f
(how to access public share link)


#2

@adtastic You're public share link does not work. Go on to Site Settings > Share > ON > Copy.


#3

Now it works :grinning:


#4

yeah it was ON. But then I checked it and noticed it didn't work. I tried it a couple of times so something is buggy! But I did a workaround and made it public and used the open in webflow link it provides.


#5

Found the problem, you should never have anything fixed that has elements inside. I'll send a screenshot of what to fix. :grinning:


#6

Go on Form and fix the height to Auto, check if this works. If this does not work tell me and I will research further. :grinning:


#7

yeah originally it was set that way and had the problem. so that is why I was trying to force form height in mobile view. but I set it back to auto and uploaded it so you can see it is still the problem.


#8

So you're still having the problem?


#9

yes, still there. has me boggled.


#10

Interesting...I looked at all the parent contents and cannot find one fixed px element. :frowning:


#11

yeah same here I cannot find anything that is making it do that. FYI it works fine until I add two fields. I added the two bathroom select fields and that is what kicks it out of size.


#12

Hmm...very interesting...:confused:


#13

I've even moved the three buttons just below the form into their own div and then added a bunch of space between the top of the div and the form and it doesn't budge once I upload this and view it in mobile it is still messed up with the buttons over the top of the form like in the image. In fact I've tried all kinds of configurations from adding padding to the form, padding to the buttons etc and nothing cause it to move an inch.

oh and if you want to see it in action can look at it at richlandchamberslakerealestate/lakeproperties dot com


#14

Hmm... @adtastic currently I am not on my iMac anymore but on my iPhone so I won't be able to view the website right now to play around with it. I'm sure there's something basic we have all just forgotten and are missing. I'll get back to this problem a little later but anybody else on the Forum please do try to find the problem. Thanks! :grinning::wink:


#15

yes has me stumped. thanks for looking.


#16

well think I found the problem. must be a bug. I had given the form a class. I noticed that the height of the class was in blue. Clicking it said that it was inheriting the class (of the same name). Kind of weird. But the class was empty anyways meaning I had not made any modifications to any of the styling except for background. I removed the class and named a new one. That fixed it sort of. Because with the new class I have given the form a background color but uploading the changes is not changing the background color from the default of transparent to the new color I've stipulated. So there is some sort of bug I think but beyond my pay grade to try and figure it out will just try to workaround it.


#17

Looks like you got it fixed now. Let us know if you are still facing problems with this.


#18

Hi @adtastic, I took a peek also at the site, but I cannot see any issues with the form, are you still having any issues?

It sounds like there was some other element on the site that had the same class name used as the form with the height property set. This may may have been why the height style was showing with blue highlight.

Regarding the trouble to change the background color, that seems to be working, is there any further issue?


#19

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.