Unresponsive form for mobile

[AllisonAltus]

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  

[TRooInbound · Accepted solution]

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

[TRooInbound · Accepted solution]

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

[TRooInbound]

HI @AllisonAltus,

Please provide page URL to understand better?

Team TRooInbound

[AllisonAltus]

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 

[TRooInbound · Accepted solution]

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

[AllisonAltus]

Hi @TRooInbound yes thanks so much for your help! 

[TRooInbound · Accepted solution]

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

[yhajjar]

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,

[TRooInbound · Accepted solution]

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

[StepanJandl]

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

[SLemieux]

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!

[audreypkx]

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 ?

[StepanJandl]

Solved

[yhajjar]

@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

[yhajjar]

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