Form shrinks on responsive LP | Community
Skip to main content
Jaclyn_Tan1
Jaclyn_Tan1
Level 2
May 1, 2020
Solved

Form shrinks on responsive LP

  • May 1, 2020
  • 1 reply
  • 2648 views

We have a guided LP template and is built to be responsive, however, when I throw a form in there (one w/ CSS or one w/o) it gets super narrow on mobile. Not sure if its the LP or the form itself: solutions.healthcaresource.com/fusion-request.html 

 

Suggestions?

Best answer by SanfordWhiteman

Because you put the form inside a .col-5 container:

 

.col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }

 

Betwen the flex and the max-width you end up constraining it to 41 ⅔ % of the screen.

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
May 1, 2020

Because you put the form inside a .col-5 container:

 

.col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }

 

Betwen the flex and the max-width you end up constraining it to 41 ⅔ % of the screen.

Jaclyn_Tan1
Jaclyn_Tan1Author
Level 2
May 4, 2020

Once again, you've saved the day! We outsourced our templates so I had no idea what the root cause was. Thank you, Sanford!

Dave_Roberts
Dave_Roberts
Level 10
May 12, 2020

Im a little late to the part here, but wanted to pile on with a solution to get this working a bit better in mobile.

 

The .col-5 class that's in there right now constrains the column to a fixed width "all the time". 

What we'd rather have in there is a full-width column (.col-12) for mobile and then a smaller column at the medium breakpoint (768px) for tablet and larger displays.

You can use the bootstrap classes to accomplish this without much fuss, you'll just need to replace the .col-5 class with .col-12 .col-md-5 which means it should be "12-columns (full-width) until the medium breakpoint, then it should only be 5/12 columns wide instead". 

I've highlighted a shot of the code I updated in the inspector and a preview of the mobile view (less than 768px wide) for reference here.

 

 

It looks like you'd need to edit the template to update this code, but you should be able to safely replace these classes and re-approve the template to kinda plug this in.

Terms & ConditionsAccessibility statement

Loading footer...