Confused about 1 Bootstrap Media Query

[snichols]

site: http://holly.holly.localmarketinginc.com/

Using Bootstrap 3.2
I coded all my WordPress style.css from scratch, taking the mobile first approach.
I am using only one media query to start the desktop styles at min-width 784px wide.
Everything works great!

Until I get to 996px – 1215px wide, and it looks like another media query kicks in and shows the mobile nav again. I can’t seem to figure out why this is happening. Can anyone point me to where these styles are kicking in & being inherited? What am I over looking?

[shaneisme]

Are you sure you’re using Bootstrap 3.2? It looks like you’re using Bootstrap 2 from your syntax.

If you’re not going to follow Bootstrap’s media queries or visibility classes, you might not want to use Bootstrap at all.

Looking at the inspector, a lot of things are going on at multiple break points. You’ve got stuff firing off that you did at 784px, but Bootstrap 2 has 3 break points: 768px, 979px and 1200px. It also has stuff that works only between their small, medium and large.

Bootstrap 3 has a lot more ways to control things, but I’d still recommend using their break points. Even if you’re only going to use their “small” one. You can have one set of rules at “xs” (which handles extra small and up), and then classes for “med” (which handles medium and up).

OR – you can just set things up on your own. If all you’re using by Bootstrap is the grid system, maybe just take that part and roll with it (also adjust your break points to match).

[Author]

Posts