How is this media query getting overidden?
Hi. First post. 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 overidden. 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 overiding 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.
I know this is probably a stupid question, but why do you want to use two different grid systems? Personally I would you just one grid system per page, that way it would save you headaches. However, using two should be doable, all you have to do is make sure you have no naming conflicts with your classes and CSS properties don't conflict with each other.
Hi. Maybe I wasn't clear above. I don't want to use two grids. I just want to make the second one perform like the first. That is, when minimized, I want the elements to nicely wrap under each other and the element width to increase to 100%. They are using the same bootstrap.min.css file so I'm trying to figure out what it is that causes their behavior to be different. There seems to be something overiding the media queries in the second one causing them to be ignored maybe? Any thoughts?
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)