characteristics / option box responsive?

Hello,

I am trying to get the product characteristics / options responsive working well on a mobile device.
|Therefore I added the following lines in the front.css. This works fine for the mobile devices, but when it opens in the normal webpage the width of the options box is not set to 100% anymore (see picture 1). When I disable these lines the options box is getting the full width, but then the responsive is not working well (see picture 2). I think I missed something, any Ideas?

.hikashop_product_characteristics, .hikashop_product_options{
width: auto !important;
}

.hikashop_product_characteristics_table select, .hikashop_product_options_table select {
width: auto !important;
}

Hi,

You should encapsulate your CSS within a @media CSS tag so that you can have it apply only for some width and not others. That way, it won't break the display on mobile devices.
www.w3schools.com/cssref/css3_pr_mediaquery.asp

Thanks Nicolas,

I implement the following line in the front css.

@media only screen and (max-width:350px) {
.hikashop_product_characteristics, .hikashop_product_options, .hikashop_product_characteristics_table select, .hikashop_product_options_table select {
width: auto !important;
}