2015-04-12 6 views
0

Je crée un don pour une organisation à but non lucratif. Le formulaire est situé au https://thecommunityproject.org/donate/. J'utilise CSS pour styliser les boutons radio comme des boutons normaux, mais j'ai un problème avec d'autres éléments se déplaçant vers le haut à côté des boutons d'option. J'ai aussi besoin que les boutons soient réactifs, comme le reste du design du site. Ceci est le CSS personnalisé que j'ai pour les boutons radio:Gravity Forms Formulaire de don Boutons d'option

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; 
} 

Merci!

Répondre

1

float: left; dans le css radio est le problème afin de supprimer cette

puis ajouter display: inline-block; pour cette body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li

enter image description here

Cependant, l'email et recevez des e-mails awsome sont également inline donc je suggère d'utiliser inline-block seulement pour les articles de la liste avec le don ammount, donner par carte de crédit, et paypal. quant à l'information sur la vie privée, vous pouvez la styliser un peu mieux pour qu'elle ne soit pas trop serrée

+0

Merci beaucoup! C'est ce que j'ai fait! –