CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel
Daniel

Reputation: 1466

bootstrap Media Query not working

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?

Upvotes: 6

Views: 24246

Answers (5)

Suganya Yuvaraj
Suganya Yuvaraj

Reputation: 231

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.

Upvotes: 23

Adam
Adam

Reputation: 71

Got it working now. Mobile with max only then parts from to and above 1200 is reading default.

@media (max-width: 640px) {

}
@media (min-width:640px) and (max-width: 768px) {

}

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

}

@media (min-width: 992px) and (max-width:1200px) {

}

Upvotes: 2

Sarower Jahan
Sarower Jahan

Reputation: 1495

You can use max-width. when screen regulation is maximum 992px, then it will work. 

 @media only screen and (max-width : 992px){
       /*your styles for Tab device*/
 }

You can use max-width. when screen regulation is maximum 767px, then it will work. 

@media only screen and (max-width : 767px){
       /*your styles for mobile device*/
 }

Upvotes: 2

priya786
priya786

Reputation: 1834

i hope this may work for you Please Define it in your style.css not in bootstrap

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

Upvotes: 0

ketan
ketan

Reputation: 19341

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.

Upvotes: 6

Related Questions