How to manipulate width in media queries?

[krumm...@gmail.com]

Hi there,

I'm facing a problem using Select2: the problem is that I'm implementing it in a responsive project (Bootstrap 3) and I need to manipulate the select-box widths on various screen sizes. However, as far as I got (according to the documentation), the only way to give width in this plugin is inline <style> tag. So, for instance, I give it a class:

<select id="fam_list" name="fam_list" tabindex="-1" class="s_box_big" style="width: 30em">
<option>Friends</option>
<option>Family</option>
<option>Relatives</option>
<option>Colleagues</option>
<option>Enemies</option>
</select>

When I get to 420px viewport, I need to tweak the width a little bit, so I put down something like this:

@media screen and (max-width: 420px) {
select.s_big_select[attribute="style"] {
width: 26em;
}
}

However, nothing happens, since the plugin starts to work and it overrides everything with a bunch of hidden (and not only) <span> tags, mostly controlled by a very complicated (at least for me) .js plugin. Has anybody come across the similar issue(s) with this plugin and is there any workaround?