# Making a form mobile responsive

**URL:** <https://community.hubspot.com/t/making-a-form-mobile-responsive/130678>\
**Category:** Tips, Tricks & Best Practices\
**Tags:** forms\
**Created:** [April 28, 2025, 10:20am UTC](https://community.hubspot.com/t/making-a-form-mobile-responsive/130678 "2025-04-28T10:20:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juliaovejero](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juliaovejero/32/62359_2.png) [@Juliaovejero](https://community.hubspot.com/u/Juliaovejero)\
**Post date:** [April 28, 2025, 10:20am UTC](https://community.hubspot.com/t/making-a-form-mobile-responsive/130678/1 "2025-04-28T10:20:44Z")

</div>

Hi, The form that shows after clicking on “Let’s Talk” is not mobile responsive. How can I make it work?

This is the LP: [McCANN6 - The global scale agency | McCANN6](https://landing-page-media.co.il/lp/newMtech/#)

Thanks!

---

<div class="post-metadata">

**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\
**Post date:** [April 28, 2025, 10:51am UTC](https://community.hubspot.com/t/making-a-form-mobile-responsive/130678/2 "2025-04-28T10:51:31Z")

</div>

Hey @Juliaovejero what specifically are you looking to change on this? When I resize the window the forms size changes too.

 ![TomM2_0-1745837474525.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/0/c0c3e715987b500035d6bf7a3c5c16f6ff3e0386.jpeg)

Is there a specific element you’re looking to change? HubSpot forms would be mobile responsive by default.

---

<div class="post-metadata">

**Author:** ![Juliaovejero](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/juliaovejero/32/62359_2.png) [@Juliaovejero](https://community.hubspot.com/u/Juliaovejero)\
**Post date:** [April 28, 2025, 11:09am UTC](https://community.hubspot.com/t/making-a-form-mobile-responsive/130678/3 "2025-04-28T11:09:44Z")

</div>

Hi!

If you open it from a mobile device, or as mobile from the browser developer tools (see below), it doesn’t show as mobile responsive.

 ![Screenshot 2025-04-28 at 14.05.47.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/d/ad6eacc46310cab2a1ade6fd6efd61dcae57457c.png)

---

<div class="post-metadata">

**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\
**Post date:** [April 30, 2025, 8:38am UTC](https://community.hubspot.com/t/making-a-form-mobile-responsive/130678/4 "2025-04-30T08:38:16Z")

</div>

Hey @Juliaovejero that technically is mobile responsive, the form is responding to the window size and displaying the content within that window. The form will always be set as the width of the the container you have a placed it in. It looks like your custom pop-up isn’t changing it’s width for mobile devices and is staying quite small. It looks like you have:

.form-wrapper{width: 27.56vw} on mobile, I’d recomend using [a css media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to set this as a much larger width on mobile devices, if you set your custom pop-up to have a larger width on mobile devices your form will have more space and thus will be clearer to see on mobile devices.

---

<div class="post-metadata">

**Author:** ![Balaji\_Mavlers1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/balaji_mavlers1/32/59061_2.png) [@Balaji\_Mavlers1](https://community.hubspot.com/u/Balaji_Mavlers1)\
**Post date:** [April 30, 2025, 7:05am UTC](https://community.hubspot.com/t/making-a-form-mobile-responsive/130678/5 "2025-04-30T07:05:30Z")

</div>

Hi @Juliaovejero

To make the form that appears after clicking “Let’s Talk” on your landing page mobile responsive, you’ll want to do a few key things. I inspected the page and here’s what you should focus on:  
Key Fixes for Mobile Responsiveness:

1) Viewport Meta Tag  
Ensure you have this in your \<head\> section:

\<meta name=“viewport” content=“width=device-width, initial-scale=1”\>

2)Fix Widths in CSS  
The popup form (.popup, .popup-content, or similar) uses fixed widths (like 600px) which break on smaller screens. Change this to a relative width with media queries:

.popup-content {  
width: 90%;  
max-width: 500px;  
}

3)Add Media Queries  
Use CSS media queries to adapt styling for smaller screens:

@media (max-width: 768px) {  
.popup-content {  
padding: 20px;  
font-size: 16px;  
}

.popup input, .popup textarea, .popup button {  
width: 100%;  
box-sizing: border-box;  
}  
}

4)Fix Overflow and Positioning  
If the form overflows or cuts off on mobile, make sure the popup container allows scrolling:

.popup {  
overflow-y: auto;  
max-height: 100vh;  
}

Test Touch Targets and Spacing  
On mobile, inputs and buttons should be large enough to tap easily. Use sufficient padding/margins.