SOLVED

Form shrinks on responsive LP

Go to solution
Jaclyn_Tan1
Level 1

Form shrinks on responsive LP

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: http://solutions.healthcaresource.com/fusion-request.html 

 

Capture.PNG

Suggestions?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Form shrinks on responsive LP

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.

View solution in original post

3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Form shrinks on responsive LP

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.

View solution in original post

Jaclyn_Tan1
Level 1

Re: Form shrinks on responsive LP

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
Level 8

Re: Form shrinks on responsive LP

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.

 

Dave_Roberts_0-1589262883432.png

 

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.