Form cuts off at larger screen size

User 2876353 Photo


Registered User
4 posts

I have inserted a Web Form created with Form Designer using the HTML Element in Site Designer V3. Works fine for mobile devices but as the screen size increases more and more of the form is cut off. Any ideas? Thanks!
User 122279 Photo


Senior Advisor
14,447 posts

We need to SEE the problem in order to get any ideas.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2876353 Photo


Registered User
4 posts

Inger,

Sorry forgot the link. http://gicms.coffeecup.com/index.html

Thanks
User 122279 Photo


Senior Advisor
14,447 posts

To me it looks like you have given the page or some page elements a max-height which is too short. Try setting it to auto.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2876353 Photo


Registered User
4 posts

Inger,

Thanks for your response. I've double checked and height is set to auto. I'd be happy to upload the file if you'd like to take a look.

Thanks again.

Dan
User 122279 Photo


Senior Advisor
14,447 posts

Yes, it is easier to find the error if we could see the project file.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2876353 Photo


Registered User
4 posts

Inger

Here you go. The form displays normally when it's stand alone.

Dam
Attachments:
User 122279 Photo


Senior Advisor
14,447 posts

I think the answer to this problem must be in the form code or css somewhere. What kind of form is it?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts

Well, certainly the styling of the #form-iframe was missing something, the height. In the wee code window for the html element I added to the styling:
height:400px;

And if you want the form to appear a bit closer to the green heading, you can also add:
margin-top:-30px;

or just as many px you find ok. You may perhaps want to use media queries and add less negative top margin for small screens and more for larger ones.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.