Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #853601

    I’m trying to make a form stretch the fill width of the site. I tried setting the wrapper to 100% and then making each field a percentage to add up to 100.

    .gform_wrapper ul.gform_fields { width: 100%; }
    input#input_1_1, input#input_1_2 { width: 25% !important; } /* first and last */
    input#input_1_3 { width: 40% !important; } /* email */
    #submit, .button { width: 10% !important; }

    /* submit */

    … but it makes the fields very small. I can get it close with px values, but it’s not perfectly to the edge and responsively it’s not great.

    Thank you


    Hey lzevon,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (min-width: 641px) {
    .gform_wrapper .top_label li.gfield.gf_inline {
        padding-right: 5px;

    Best regards,


    That’s not doing anything to bring the form full width? I’ve tried hundreds of variations to no avail! I’m looking for the attached result. I’m using Gravity Forms and the gf_simple_horizontal stretch-form ready class and also tried non conflict mode, disabling CSS output from GF, HTML 5, etc. I’m simply looking for all fields to be inline and stretch the entire width of the page?


    Hi lzevon,

    I see you’ve made some progress.
    Here is the code to extend the button a bit:

    @media only screen and (min-width: 641px) {
      #top .gform_wrapper input {
        width: 70%;
    .gform_wrapper form.gf_simple_horizontal div.gform_footer.top_label {
        width: 100% !important;
        max-width: auto;

    If you need further assistance please let us know.
    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘full width form’ is closed to new replies.