htmlcssformsradio-buttongravity

Gravity Forms Donation form Option Buttons


I'm creating a donation from for a nonprofit organization. The form is located at https://thecommunityproject.org/donate/. I'm using CSS to style the radio buttons as regular buttons, but I am having a problem with other elements getting moved up beside the option buttons. I also need the buttons to be responsive, like the rest of the site design. This is the custom CSS I have for the radio buttons:

input[type=radio] {
display:none;
}

input[type=radio] + label {
border: none;
float: left;
position:relative;
margin-left: 0.2em;
background-color: #BCD676;
border-radius: 0px;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
vertical-align: top;
padding: 1em 2.0em;
}

Thanks!


Solution

  • float: left; in the radio css is the problem so delete that

    then add display: inline-block; for this body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li

    enter image description here

    however the email and get awsome emails are also inlined so i suggest using inline-block only for the list items with the donation ammount, give by credit card, and paypal. as for the privacy info you can style it a bit better so its not streching