Stretching to the max (full width)

  • Profile Image
    hmasri85
    Asked on February 03, 2020 at 05:52 AM

    Hello,

    This is my form: https://form.jotform.com/200331383432443

    I would like to stretch it to the max. It is currently centred in the middle of the page, how can I accomplish this task?

    Thanks,
    Hasan 

  • Profile Image
    AshtonP
    Answered on February 03, 2020 at 08:14 AM

    You can go to the Form Designer >> Styles tab to adjust the form width. Here is a screenshot for your reference: 

    1580735605The Easiest Online Form Builde

    Let me know if you have any questions or need any further help.

  • Profile Image
    hmasri85
    Answered on February 03, 2020 at 09:50 AM
    I tried but it did not stretch to take the full width of the page. It is
    currently centered. I want it to look like any page stretched fully. Do we
    need some css?
    ...
  • Profile Image
    Kiran
    Answered on February 03, 2020 at 12:33 PM

    I am sorry that I am not sure if you are referring to the fields in the form or to the width of the form. Could you please elaborate on your requirement with a screenshot so that we can guide you in the right direction?

    We will wait for your response. Thank you! 

  • Profile Image
    hmasri85
    Answered on February 03, 2020 at 01:50 PM
    Hello again,
    Please open the form on a desktop / laptop. You will notice that the form is at the center of the page and there is an empty spacing to the left and to the right of the form.
    Please go to
    www.acs.edu.lb/cafeteria
    As you can see, this form is not centered and is fully stretched to the width of the page.
    Could this be applied to my current Jotform?

    ...
  • Profile Image
    EltonCris
    Answered on February 03, 2020 at 05:58 PM

    If you want the form to be in 100% full width, you can inject the following CSS code to your form.

    .supernova {

        background-color: #fff;

    }

    .form-all {

        width: 100% !important;

        max-width: none !important;

        border: 0 !important;

    }

    Guide: How to Inject Custom CSS Codes

    If you want to to expand the fields too, you can inject this CSS code at the very top.

    @import url('https://shots.jotform.com/elton/genericTheme.css');