topic Re: Unresponsive form for mobile in CMS Development

Unresponsive form for mobile

AllisonAltus — Mon, 06 Nov 2017 16:35:58 GMT

Hi I'm just starting out with HubSpot and I'm creating my first landing page template. I created a floating (or perhaps better called fixed) sign up form to the right column of my landing page. However when viewed on mobile the sign up form appears on top of all the other web page text. How do i stop this from happening?

Thank you

Allison

Re: Unresponsive form for mobile

TRooInbound — Mon, 06 Nov 2017 18:51:41 GMT

HI @AllisonAltus,

Please provide page URL to understand better?

Team TRooInbound

Re: Unresponsive form for mobile

AllisonAltus — Tue, 07 Nov 2017 08:43:41 GMT

Hi, here it is - i'm still working on the content so ignore that for now

http://go.altusintervention.com/icotaeurope?hs_preview=FiIXIZpD-5421643852

Thank you

Allison

Re: Unresponsive form for mobile

TRooInbound — Tue, 07 Nov 2017 15:19:26 GMT

Hi @AllisonAltus,

The issue is due to the fixed position of the form, you need to change CSS in media queries.

Please add below CSS code in your page stylesheet.

@media (max-width: 767px) {
    .main-content {
         position: static !important;
     }
}

hope this work!

Team TRooInbound

Re: Unresponsive form for mobile

AllisonAltus — Wed, 15 Nov 2017 08:52:30 GMT

Hi @TRooInbound yes thanks so much for your help!

Re: Unresponsive form for mobile

TRooInbound — Wed, 15 Nov 2017 09:54:42 GMT

Did my post help answer your query? Help the Community by marking it as a solution?

Re: Unresponsive form for mobile

yhajjar — Thu, 12 Apr 2018 22:17:51 GMT

dear all,

I tried embedding a form to my page and it works fine on desktop but when I try to open my pae on mobile the form shrinks and only one part of it appears meanwhile the other part disappears from the bottom can you help me fix this matter ?

here is the link of the page I'm working on:

https://www.broadwayinstitute.com/sejours-linguistiques/ny/

I work on wordpress so how can I fix that ?

thanks,

Re: Unresponsive form for mobile

TRooInbound — Fri, 13 Apr 2018 13:12:36 GMT

Hi @yhajjar,

There is a CSS issue,

Someone give max-height on form iframe code,
Kindly add my code in your stylesheet that issue will be solved

@media only screen and (max-width: 467px) {
	iframe.hs-form-iframe {
	    max-height: 100% !important;
	}
}

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound
hello@trooinbound.com

Re: Unresponsive form for mobile

yhajjar — Fri, 13 Apr 2018 13:37:30 GMT

@TRooInbound Thanks a lot it worked how can I mark it as a solution ?

Re: Unresponsive form for mobile

yhajjar — Fri, 13 Apr 2018 23:42:35 GMT

@TRooInbound actually after I added the css code you gave me and when I try it on chrome and safari on desktop it works fine even when I shrink the page to see if it would show up on mobile and it does and then I even inspect the page with the google chrome and try to see what it looks like in different mobile devices iphones & androids and it works but this is all being done on my computer's browser. However when I open it on my iPhone 6 it's not working again only a small part of the form shows like even when I installed the chrome app on my phone it didn't work the form's botton still disappears.

Could you please tell me what I'm supposed to do now,

Thanks

Re: Unresponsive form for mobile

StepanJandl — Tue, 17 Mar 2020 19:31:11 GMT

Hello!

I have probably the same problem. I put the form to my site (https://yaneba.cz/). For the desktop version, everything is ok. But there is a problem with responsiveness on the mobile version.

Can you help me how to fix this with css?

Thank you!

Stepan

Re: Unresponsive form for mobile

StepanJandl — Thu, 19 Mar 2020 08:41:06 GMT

Solved

Re: Unresponsive form for mobile

audreypkx — Mon, 23 Mar 2020 14:49:41 GMT

Hey, I have the same problem. The form is showing well on desktop but not on mobile. The form is located on a Wordpress page. What do I have to do ?

Re: Unresponsive form for mobile

SLemieux — Wed, 14 Jul 2021 19:55:18 GMT

Hello, we are experiencing what sounds like this same issue with our slide in form. Works great on destop but is not responsive across all mobile devices (usually is bigger than the content frame). Noticed the problem on my Samsung Galaxy S8 using Chrome; tried it on a Iphone 7+ where it did not have the problem; then tried on an Ipad Mini where it did have the problem. Any ideas would be greatly appreciated!