Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23468

    Hi I’m using Gravity Forms

    http://rcgauto.wpengine.com/shipping/car-shipping-quote/ (hosted on WPengine)

    Can you give a suggestion how to make fields smaller for better allignment.

    Right now the “Small” and “Medium” are the same size, I believe there is something in the theme that governs minimum field width.

    Thanks

    #119934

    Hi,

    Add this on your custom.css to control the field width.

    #top input[type="text"] {
    width: 150px;
    }

    Max width is 210px.

    Regards,

    Ismael

    #119935

    That doesn’t quite solve the problem, I want to be able to regulate the width of the fields.

    Gravity Forms allows you to select small or medium

    Right now I can’t

    #119936

    Hi,

    You can find all of the theme’s form style on css > base.css

    /* #Forms
    ================================================== */

    #top form {
    margin-bottom: 20px; }
    #top fieldset {
    margin-bottom: 20px; }
    #top .input-text,
    #top input[type="text"],
    #top input[type="input"],
    #top input[type="password"],
    #top input[type="email"],
    #top input[type="number"],
    #top input[type="url"],
    #top input[type="tel"],
    #top input[type="search"],
    #top textarea,
    #top select {
    -webkit-appearance: none;
    border: 1px solid #e1e1e1;
    padding: 8px 6px;
    outline: none;
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    margin: 0;
    width: 210px;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    border-radius: 0px;
    }

    #top input[type="text"]:focus,
    #top input[type="password"]:focus,
    #top input[type="email"]:focus,
    #top input[type="number"]:focus,
    #top input[type="url"]:focus,
    #top input[type="tel"]:focus,
    #top input[type="search"]:focus,
    #top textarea:focus {
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
    color: #555;
    }
    #top textarea {
    min-height: 60px; line-height:1.5em;}
    #top label{
    display: block;
    font-weight: bold;
    font-size: 12px; }
    #top legend {
    display: block;
    font-weight: normal;
    font-size: 15px; }
    #top select {
    width: 220px; }
    #top input[type="checkbox"] {
    display: inline; }
    #top label span,
    #top legend span {
    font-weight: normal;
    font-size: 13px;
    color: #444; }

    #top textarea{width:100%;}

    #top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area{border:1px solid #9AA600;} /*#70A41B*/
    #top #wrap_all .error .text_input, #top #wrap_all .error .text_area{border:1px solid #DF653E;}
    #top #wrap_all .ajax_alert .text_input, #top #wrap_all .ajax_alert .text_area{border:1px solid #ffb628;}

    I think this part of the style is the one preventing you from defining input width

    #top .input-text,
    #top input[type="text"],
    #top input[type="input"],
    #top input[type="password"],
    #top input[type="email"],
    #top input[type="number"],
    #top input[type="url"],
    #top input[type="tel"],
    #top input[type="search"],
    #top textarea,
    #top select {
    -webkit-appearance: none;
    border: 1px solid #e1e1e1;
    padding: 8px 6px;
    outline: none;
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    margin: 0;
    width: 210px;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    border-radius: 0px;
    }

    The width is set to 210px.

    Regards,

    Ismael

    #119937

    Hi, thank you, that helped, I also changed

    display: inline;

    and removed width: 210px; from base CSS

    One thing still remains, maybe you can help me with it,

    There is a large gap when the from ends, what can you advise to do to rid of it

    #119938

    Hi I got the large gap figured out,

    Thanks

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Gravity Forms – Field Sizing’ is closed to new replies.