Continuing the discussion from Possible? If not, any ideas? (custom radio buttons for donation amounts) [RESOLVED]:
Thanks @chrishajer
Hey All,
I was trying to accomplish the very same thing in this thread but keep running into an issue with the buttons not sizing correctly, I tried adjusting the CSS but it stays the same.
Any help would be great!
Link to test form
@dapro it appears you have added some CSS that perhaps you shouldn’t.
I took a look at your site in Google Developer Tools. Without knowing exactly what you are wanting I created some CSS for you to try out.
.gform_wrapper .gfield_radio li label {
height: 50px;
line-height: 50px !important;
width: 100%;
min-width: 100%;
}
This is how this looks on desktop:
This is how it looks on mobile:
Looking at the code it appears the code you added or someone else gave to you, references the same selector/ID multiple times but with different variables. Without spending too much time on that, the CSS above will make this work, but perhaps you should consider cleaning this up if you get the chance and feel up to it.
Also, my serious suggestion is for you to reference the post id. The Selector/ID above could cause conflicts on other pages if the same element is used on another page. To find your post id, log into your admin, click on the page your form is on, and look in the url. It should say something like: post=17299. When you have that number, you should use the code below to prevent any possible issues.
/* Change 17299 to your page id. Add the code below in your wordpress customizer*/
.page-id-17299 .gform_wrapper .gfield_radio li label {
height: 50px;
line-height: 50px !important;
width: 100%;
min-width: 100%;
}
Hope this helps! 
@user5c0166073a6c48.6 (don’t know why it didn’t @deremiller…)
Thanks, yes, this is exactly what I’m trying to get and I see that using the .postid is a cleaner way to add the CSS to the page/form (which I did). I replaced the CSS from this link with what you have above but still get nothing.
What am I doing wrong?
If you removed the CSS, you will need to re-add the code that was on the page you sent. You’ll then want to in addition add the code I sent you.
Let me know.
Did you add the code from the link after you added the code I sent you? If you did swap them out. It’s a cascading style sheet, CSS that is. You’ll want to make sure you add these correctly.
To be clear. Add the code from the link you sent. Then after you add the code, add the code I sent. So this way it’s cascading correctly.
If that doesn’t work I’ll take another look. But I clearly achieved the results as you can see in the screenshot. Lol.
Don’t worry, I’ll see this through for you.
Did you add these classes to the actual field as well? I looked over the link you sent. Just wondering about this.
LOL, I did add it back, then add your css after it, and have the custom class too.
This is really frustrating becasue when I tick off display & padding in the Google Developer Tools the form looks correct, though not as good as yours.
What if I started from scratch?
Also, I really appreciate you helping me!!
Replace your CSS code for .gfp_big_button .gfield_radio label with the code below.
.gfp_big_button .gfield_radio {
margin: 0px auto;
padding: 10px 30px;
float: none;
background: #f47f26;
color: #fff;
letter-spacing: 0.09375rem;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: Open Sans, sans-serif;
font-weight: 600;
margin: 0;
display: block;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
-webkit-appearance: none;
cursor: pointer;
line-height: 1;
position: relative;
text-decoration: none;
text-align: center;
font-size: 1.1em;
box-sizing: border-box;
width: 100%;
min-width: 100%;
padding: 0px;
height: 50px;
width: 150px;
min-width: 150px;
padding: 15px !important;
margin: 10px;
padding: 15px;
line-height: 50px;
}
Also replace .gfp_big_button .gfield_radio li input[type=radio] with what is below.
.gfp_big_button .gfield_radio li input[type=radio] {
display: none;
}
I believe the issue is with the original snippet on the link you sent. Mixing width with % and px is problematic.
ok so this is what I have:
.ginput_price {
display: none;
}
Followed by
.gfp_big_button .gfield_radio li input[type=radio] {
display: none;
}
And then:
.gfp_big_button .gfield_radio {
margin: 0px auto;
padding: 10px 30px;
float: none;
background: #0274be;
color: #fff;
letter-spacing: 0.09375rem;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-family: Open Sans, sans-serif;
font-weight: 600;
margin: 0;
display: block;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
-webkit-appearance: none;
cursor: pointer;
line-height: 1;
position: relative;
text-decoration: none;
text-align: center;
font-size: 1.1em;
box-sizing: border-box;
width: 100%;
min-width: 100%;
padding: 0px;
height: 50px;
width: 150px;
min-width: 150px;
padding: 15px !important;
margin: 10px;
padding: 15px;
line-height: 50px;
}
And then the hover:
.gfp_big_button .gfield_radio label:hover {
background: #414142;
}It appears to be working to me. 
Nice site by the way, it’s very clean.
2 Likes
Thanks @user5c0166073a6c48.6 for coming through and taking your time out to help me out!! Great work!!
2 Likes
1 Like