Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 18, 2017 at 10:52 pm #853601
    lzevon

    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

    September 19, 2017 at 2:21 am #853626
    Yigit

    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,
    Yigit

    September 19, 2017 at 9:25 pm #854048
    lzevon

    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?

    September 21, 2017 at 2:52 pm #854885
    Victoria

    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,
    Victoria

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