Buy Now
Sign in

Responsive multi field form

ocsavsaid , June 08 2018
ocsavsaid 1
June 08 2018 #378208
I have a tabbed form. In one tab I have two dynamic dropdown lists, two simple dropdowns, a radio box , a text box and a submit button. It's loading a price from database according to the selections. The form inputs are all inside a multi field and all elements display inline on big screens.
All the logic is working as expected however the responsiveness of the form is not great. I tried all the styles and none seam to be completely responsive. I would like all the fields to be 100% wide on mobile devices but the media queries only seem to affect the button. Nothing else. Even with the !important; rule.
I have tried I'd selector, class selector and nothing seams to override de bootstrap3.
.gbs3 .chronoform .gcore-input{width:100% !important;}
.gbs3 .chronoform .form-control{width:100% !important;}
With the above code some of the fields do what's expected but only if the labels are on the left of the inputs. Is they are on the top as I want them, nothing happens.
Am I doing something wrong? Should I approach it in a different way?
Any help would be much appreciated. Thanks in advance. Vasco