CODEWITHSUNDEEP
htmlcssformsradio-buttongravity
John Gray
John Gray

Reputation: 3

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!

Upvotes: 0

Views: 910

Answers (1)

Tasos
Tasos

Reputation: 5361

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

Upvotes: 1

Related Questions