bootstrap Media Query not working

Question

With twitter bootstrap i applied

 @media only screen and (min-width : 768px){

 }

but this media query is working on all other width values too, such as 992px & 1200px.

Any solution?

Answer 1

1)Please check whether you have included the meta tag in the head section of your HTML document as

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

If this line is not present then none of your media query would work.

2) If you override bootstrap break points in your style sheet make sure your stylesheet is linked to your application properly.

3)understanding how min-width and max-width works will help you. If you are trying some wrong combinations, results may be weird :)

@media (min-width:480px) {} 

The styles inside this media query would apply only if your viewport is minimum 480px or wider than that.

@media (max-width:767px){} 

The styles inside this media query would apply to your viewport only upto 767px. For any resolution higher than 767px our styles won't be applied.

@media screen 

This tells that this particular styles are only applicable to screen and not for print,projection or handheld. So @media screen or @media only screen wouldn't harm your media queries much.

These are some of my tips to troubleshoot media queries. Hope this would help you resolve your issue.

Answer 2

Change media Query to

@media screen and (min-width: 768px) and (max-width: 900px) {

}

Or any size between you want.

For more Details Refer This link.