In my survey, I have input boxes for which I have set specific widths to accommodate their values (e.g., if there should be 4 characters, it is very narrow).



When the screen is less than 768px wide, the CSS is set to make all input boxes full width (among other things I don't want):

> @media only screen and (max-width: 767px)

> .Skin .TE .FORM .InputText {

> width: 100%!important;

> }

I do not want that to happen. I want it to use the values that are set with each box, whatever those might be. I can't simply override the width by specifying "auto" or a particular value, because each field is set to be a different width. I also don't want to simply set the min page width to 768 because I do want other questions to squish more. For instance, I've set all my multiple choice questions to "columns" instead of horizontal to prevent them from moving around, but I do want the buttons themselves to try to fit into the available screen width.



How can I prevent the width-based styles from being used?