Hello,
I am having some issues trying to style my form for mobile. I know very little, but i think it may be something to do with the container? The page it is on can be seen here.
The image below is how it displays on a mobile:
Below is how i would like it to look:
I would like the form to display at a normal width. I’m not sure what is causing it to squish to the right.
Any help would be greatly appreciated.
Many thanks,
Jamila
Hi there!
In your Design Manager you should be able to find a file called parent-site-style.css. If you Ctrl + F to search, you should find something like the below:
@media screen and (max-width: 768px) {
.contact-form {
width: 100%;
padding-left: 1px;
}}
If you add “!important” after the width, as below, and Publish the file, it should update your form. This forces it to override any previous formatting.
@media screen and (max-width: 768px) {
.contact-form {
width: 100% !important;
padding-left: 1px;
}}
To fix the width of the first and last name, then, you’ll also want to add in a couple of extra lines:
@media screen and (max-width: 768px) {
.contact-form {
width: 100% !important;
padding-left: 1px;
}
}@media (max-width: 400px) { .contact-form input { width: 100% !important; } .contact-form .input { margin: 0 !important; }}
I hope that helps!
HubSpot Design / Development
If this helped, please mark it as the solution to your question, thanks!
Thank you @Stephanie-OG, that has worked perfectly! 