My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column.
Important point: I am using the jQuery plugin Mixitup.
Here is an example of the plugin's code (not mine) which you can view here: http://codepen.io/jzhang172/pen/EVGNqj
What I have attempted so far: I tried adjusting the CSS rule using @media all (max-width:600px) but had no luck changing the value of display: "value". I suspect a JavaScript solution might be needed, as my expertise lies more in CSS rather than Javascript.
Jsfiddle link:http://jsfiddle.net/jzhang172/886mbLbq/
.box{
width:200px;
height:200px;
background:black;
display:inline-block;
}
@media all and (max-width:600px)
{
#container .box{
display:block;
}
}<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>