Custom CSS gravityforms radio buttons

[Diego]

Hi,

I got stuck with my website while trying to make it responsive and avoid to write endless lines of code.

I am customising the radio buttons by showing  buttons instead of the radios.  What I am trying to do is displaying  inline custom buttons. If I use a fixed width no problem, but as I want it responsive I need to use width: auto or max-width. As soon as I set this parameters the button loses the width property and set the width at the minimum. The problem doesn't exist if the elements are displayed  in block or if I use a fixed width.

Hope you can help

Here the CSS  that I am using:

#field_2_23 ul.gfield_radio li input[type="radio"] + label {
    border: 1px solid #d1d1d1;
    color: #808080;
    background-color: #ffffff;
    max-width: 134px !important;
    height: 50px;
    border-radius: 5px;
    margin-left: 3px;
    text-align: center;
    padding-top: 14px;
}

#gform_wrapper_2 ul.gfield_radio li input[type="radio"]:checked + label {
    border: 1px solid #b0ca1f;
    color: white;
    background-color: #b0ca1f;
    font-weight: normal !important; 
}

 

Thank you in advance for any help.