No replies
rockeby
rockeby's picture
Offline
newbie
Last seen: 40 weeks 7 hours ago
Joined: 2018-01-22
Posts: 1
Points: 2

Hi,
Hope I can find someone willing to giving me a hand with something that must be really simple for you, but me.

Here's the problem:

I have a radio buttons form and instead of radio I want to use customised buttons. As the form must be responsive, I would like to use max width in order to reduce or expand automatically the width. Here's the code that I am using:

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

/* SELECTED BUTTON STYLE */

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

When I use maxwidth there is no problem if the elements are displayed in block, but as I need them displayed inline when I set max width the buttons do not keep any width or size and set at the minimum. So I had to write an endless css for every device and screen and it is still awful to see it. Now I would need to add at least 3 more pages with same form type and I am about to give up.

Please take a look to my website to understand better what I am talking about

https://book2clean.co.uk/pricing/

Hope you can help me.

Thanks