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
Thanks!
Hey @Juliaovejero what specifically are you looking to change on this? When I resize the window the forms size changes too.
Is there a specific element you’re looking to change? HubSpot forms would be mobile responsive by default.
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 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.
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.