CODEWITHSUNDEEP
csstwitter-bootstrap
Jim Smith
Jim Smith

Reputation: 161

How is this media query getting overridden?

I'm new to responsive coding. The following two grids each use the same bootstrap.min.css file but perform differently when you minimize the screen. I want to make the second one perform like the first. So, when minimizing, the elements should nicely wrap under each other and the element(s) width should increase to 100%.

In the second one, it seems the @media (min-width: 992px) is somehow being overridden. When the screen is under 992px the float:left and width percentage styles remain the same as if the screen is over 992px. But I don't know how to find EXACTLY where any overriding is done.

Any suggestions? Or perhaps better how do I diagnose for myself in the future. Firebug doesn't even show the @media query, and both Firefox and chrome only reference bootstrap.min.css, though I'm figuring it must be getting written over in another file.

http://htmlstream.com/preview/unify/feature_grid.html

http://198.74.61.72/themes/preview/ace/grid.html

Upvotes: 0

Views: 59

Answers (1)

underscored
underscored

Reputation: 46

I took a look at the CSS but as far as I can see, the col-xs columns aren't included in the same media queries. The col-md ones are. Your top example has -md classes. I think this grid works by combining several classes per column so that they are displayed differently depending on the resolution.

It'll take some puzzling but it looks like that if you combine classes per column, it should work out.

Did that make sense?

Upvotes: 0

Related Questions