I have a big problem with Bootsrap and CSS media queries on mobile devices (phone and tablets). Basic I'm using default Boostrap grid with some CSS media queries to adjust few things (like to hide/show mobile menu from Bootsrap).
Based on a desktop browsers (Chrome and FireFox) all works fine and layout is responsive. In that case I have used col-sm- classes but on mobile devices it wasn't working (tested with Nexus 7 and LG3) so I have decided to see if col-md- and that grid works fine but shouldn't effect Nexus 7 in a landscape mode.
After problem with the Bootsrap grid I have a problem with regular CSS media queries like @media screen and (max-width: 768px) {} - is not triggered on Nexus7 or LG3 (should to be triggered at least in a portrait mode).
Site to see all those issues is here: http://bgcnj.org/
Any clue what is going on?
Add this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow your mobile-specific CSS to be applied.