Viewing 1 post (of 1 total)
  • Author
    Posts
  • #21548

    We’ll use this thread to release custom css code for Gravity Forms user. We’ll also update this code if users report bugs or css code improvements.

    CSS Code for themes based on a responsive css framework (Propulsion and newer themes):

    /* Tablet Portrait size to standard 960 (devices and browsers) */<br />
    @media only screen and (max-width: 989px) {<br />
    .gform_wrapper .top_label li.gfield.gf_left_third, .gform_wrapper .top_label li.gfield.gf_middle_third {<br />
    width: 49% !important;<br />
    margin-top: 10px !important;<br />
    }<br />
    <br />
    .gform_wrapper .top_label li.gfield.gf_right_third {<br />
    width: 99% !important;<br />
    margin-top: 10px !important;<br />
    }<br />
    <br />
    .gform_wrapper li.gfield.gf_list_4col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_list_5col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_5col ul.gfield_radio li{<br />
    width: 33% !important;<br />
    margin-top: 0px !important;<br />
    }<br />
    }<br />
    <br />
    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */<br />
    @media only screen and (min-width: 480px) and (max-width: 767px) {<br />
    .gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_3col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_3col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_list_4col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_list_5col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_5col ul.gfield_radio li{<br />
    width: 49% !important;<br />
    margin-top: 0px !important;<br />
    }<br />
    }<br />
    <br />
    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */<br />
    @media only screen and (max-width: 479px) {<br />
    .gform_wrapper .top_label li.gfield.gf_left_half,<br />
    .gform_wrapper .top_label li.gfield.gf_right_half,<br />
    .gform_wrapper .top_label li.gfield.gf_left_third,<br />
    .gform_wrapper .top_label li.gfield.gf_middle_third {<br />
    width: 99% !important;<br />
    margin-top: 10px !important;<br />
    }<br />
    <br />
    .gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_3col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_3col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_3col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_2col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_2col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_list_4col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_4col ul.gfield_radio li,<br />
    .gform_wrapper li.gfield.gf_list_5col ul.gfield_checkbox li,<br />
    .gform_wrapper li.gfield.gf_list_5col ul.gfield_radio li{<br />
    width: 99% !important;<br />
    margin-top: 0px !important;<br />
    }<br />
    }<br />
    <br />
    /* general style */<br />
    .gform_wrapper input, .gform_wrapper select{<br />
    margin-bottom: 0 !important;<br />
    min-width: auto !important;<br />
    }<br />
    <br />
    .gform_wrapper ul li.gfield {<br />
    margin-bottom: 15px !important;<br />
    }<br />
    <br />
    .gform_wrapper li.gf_list_inline ul.gfield_checkbox li, .gform_wrapper li.gf_list_inline ul.gfield_radio li{<br />
    margin-right: 20px !important;<br />
    }<br />
    <br />
    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {<br />
    margin: 1px 0 0 19px !important;<br />
    }<br />
    <br />
    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label{<br />
    font-weight: normal;<br />
    }<br />
    <br />
    #top .gform_page_footer .button{<br />
    margin-bottom: 20px !important;<br />
    display: inline !important;<br />
    }<br />
    <br />
    #top .gform_page_footer .button.gform_button, #top .gform_page_footer .button.gform_next_button{<br />
    float: right !important;<br />
    }

    You can insert the code into the quick css option field (Theme Options Panel) or you can use css/custom.css for your custom css code. If you encounter any styling issues, etc. please create a new thread in the right sub forum (theme name) and we’ll try to help you.

Viewing 1 post (of 1 total)

The topic ‘Gravity Forms Styling Adjustments’ is closed to new replies.