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