Form width not playing nice

SOLVE
Jlawal
Top Contributor

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:

hs community.PNG

 

Below is how i would like it to look:

 

hs community 2.PNG

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

0 Upvotes
1 Accepted solution

Accepted Solutions
Stephanie-OG
Solution
Key Advisor

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

View solution in original post

2 Replies 2
Stephanie-OG
Solution
Key Advisor

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!

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

View solution in original post

Jlawal
Top Contributor

Thank you @Stephanie-OG, that has worked perfectly! 🙂

 

 

0 Upvotes