Unresponsive form for mobile

SOLVE
Highlighted
Top Contributor

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  

Reply
0 Upvotes
3 Accepted solutions

Accepted Solutions
Highlighted
Solution
Regular Advisor

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

View solution in original post

Highlighted
Solution
Regular Advisor

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

View solution in original post

Reply
0 Upvotes
Highlighted
Solution
Regular Advisor

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 Smiley Happy

@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

View solution in original post

12 Replies 12
Highlighted
Regular Advisor

HI @AllisonAltus,

 

Please provide page URL to understand better?

 

Team TRooInbound

Reply
0 Upvotes
Highlighted
Top Contributor

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 

Highlighted
Solution
Regular Advisor

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

View solution in original post

Highlighted
Top Contributor

Hi @TRooInbound yes thanks so much for your help! 

Highlighted
Solution
Regular Advisor

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

View solution in original post

Reply
0 Upvotes
Highlighted
New Contributor

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,

Reply
0 Upvotes
Highlighted
Solution
Regular Advisor

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 Smiley Happy

@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

View solution in original post

Highlighted
New Contributor

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

Reply
0 Upvotes
Highlighted
New Contributor

@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

Reply
0 Upvotes
Highlighted
New Contributor

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

 

Reply
0 Upvotes
Highlighted
New Contributor

Solved

Reply
0 Upvotes
Highlighted
Occasional Contributor | Platinum Partner

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 ?

Reply
0 Upvotes