What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Max width on a responsive form

    Asked by icornier on November 08, 2014 at 10:34 AM

    Is there a way to have a form that has a max width with the "responsive" setting on? I'm trying to size the survey on mobile and it looks best with the responsive setting on (instead of using the css code that's recommended in other posts). However, the survey should be 650 max on the actual post instead of the entire window width.

    When I use the css code instead of the responsive setting the mobile layout is cut off, and the star ratings go away.

    I'm not sure how to fix this.

    Thanks.

    Page URL:
    http://www.brownbeautiful.com/recommend-your-stylist/

    Screenshot
    max survey size POST layout
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 08, 2014 at 12:10 PM

    Hi,

    Turn on the Mobile Responsive and then replace the CSS codes you've injected to your form with the following. This should control the maximum width of the form on desktop mode.

    .form-all {max-width: 650px;}

    .form-line, .form-input-wide {max-width: 400px;margin: 0 auto;}

    @media only screen and (max-width:400px){

    .form-all {max-width: 100%;}

    .form-line, .form-input-wide {max-width: 100%;margin: 0 auto;}

    .form-line {padding: 10px;}

    }

    Let us know if you need anything else.

    Another solution is to load your form in the form designer (Form Style tab > Form Designer). On the form designer, open Form Layout and then check the 'Make this form responsive' and set the maximum width you want. Check these screenshots.

    Should you need any further assistance, let us know.

    Regards!