# Unresponsive form for mobile

**URL:** <https://community.hubspot.com/t/unresponsive-form-for-mobile/3809>\
**Category:** CMS Development\
**Created:** [November 6, 2017, 4:35pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809 "2017-11-06T16:35:58Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 6, 2017, 4:35pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/1 "2017-11-06T16:35:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 6, 2017, 6:51pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/2 "2017-11-06T18:51:41Z")

</div>

HI @AllisonAltus,

Please provide page URL to understand better?

Team TRooInbound

---

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 7, 2017, 8:43am UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/3 "2017-11-07T08:43:41Z")

</div>

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](http://go.altusintervention.com/icotaeurope?hs_preview=FiIXIZpD-5421643852)

Thank you

Allison

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 7, 2017, 3:19pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/4 "2017-11-07T15:19:26Z")

</div>

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.

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

```

hope this work!

Team TRooInbound

---

<div class="post-metadata">

**Author:** ![AllisonAltus](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/allisonaltus/32/58551_2.png) [@AllisonAltus](https://community.hubspot.com/u/AllisonAltus)\
**Post date:** [November 15, 2017, 8:52am UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/5 "2017-11-15T08:52:30Z")

</div>

Hi @TRooInbound yes thanks so much for your help!

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 15, 2017, 9:54am UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/6 "2017-11-15T09:54:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yhajjar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/yhajjar/32/76793_2.png) [@yhajjar](https://community.hubspot.com/u/yhajjar)\
**Post date:** [April 12, 2018, 10:17pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/7 "2018-04-12T22:17:11Z")

</div>

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/](https://www.broadwayinstitute.com/sejours-linguistiques/ny/)

I work on wordpress so how can I fix that ?

thanks,

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [April 13, 2018, 1:12pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/8 "2018-04-13T13:12:36Z")

</div>

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  
 ![16x16_smiley-happy.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/22d5e40d253def47f5f4ea7f0e3e70be19010689.png)

```auto
@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](mailto:hello@trooinbound.com)

---

<div class="post-metadata">

**Author:** ![yhajjar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/yhajjar/32/76793_2.png) [@yhajjar](https://community.hubspot.com/u/yhajjar)\
**Post date:** [April 13, 2018, 1:35pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/9 "2018-04-13T13:35:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yhajjar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/yhajjar/32/76793_2.png) [@yhajjar](https://community.hubspot.com/u/yhajjar)\
**Post date:** [April 13, 2018, 11:42pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/10 "2018-04-13T23:42:35Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![StepanJandl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stepanjandl/32/58551_2.png) [@StepanJandl](https://community.hubspot.com/u/StepanJandl)\
**Post date:** [March 17, 2020, 7:31pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/11 "2020-03-17T19:31:11Z")

</div>

Hello!

I have probably the same problem. I put the form to my site ([https://yaneba.cz/](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

---

<div class="post-metadata">

**Author:** ![StepanJandl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stepanjandl/32/58551_2.png) [@StepanJandl](https://community.hubspot.com/u/StepanJandl)\
**Post date:** [March 19, 2020, 8:41am UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/12 "2020-03-19T08:41:06Z")

</div>

Solved

---

<div class="post-metadata">

**Author:** ![audreypkx](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/audreypkx/32/2401_2.png) [@audreypkx](https://community.hubspot.com/u/audreypkx)\
**Post date:** [March 23, 2020, 2:49pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/13 "2020-03-23T14:49:41Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![SLemieux](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slemieux/32/29572_2.png) [@SLemieux](https://community.hubspot.com/u/SLemieux)\
**Post date:** [July 14, 2021, 7:55pm UTC](https://community.hubspot.com/t/unresponsive-form-for-mobile/3809/14 "2021-07-14T19:55:18Z")

</div>

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!
