media query min-width not working

Question

I am using media query, no matter the browser is below or over 1200px, the the css always detects my browser min-width is 768px.so the display in browser is always 750px.

maybe it's a easy problem but it bothered me few hours.

My HTML:

<div class="header_1">
            <div class="logo_1">
                <a href="Learn.html">
                    <img src="img/logo.svg">
                </a>
            </div>
            <div class="sign_in">
                <ul class="sign_list_1">
                    <li>Pricing</li>
                    <li>Sign in</li>
                </ul>
            </div>
</div>

My CSS:
@media (min-width: 1200px){
    .header_1{
        width: 1170px;
    }
}

@media (min-width: 992px){
.header_1{
    width:970px;}
}

@media (min-width: 768px){
.header_1{
        width: 750px;
    }
}

This question is a duplicate of http://stackoverflow.com/questions/10306670/css-specificity-media-queries-and-min-width — Kylos, Feb 28 '17 at 02:20

score 6 · Answer 1 · answered Feb 27 '17 at 23:27

In HTML <head> add

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

Use max-width instead of min-width

@media all and (max-width: 1200px) {
   /* Your CSS Rules */
}

@media all and (max-width: 992px) {
   /* Your CSS rules */
}

@media all and (max-width: 768px) {
   /* Your CSS rules */
}

Kylos · Accepted Answer · 2017-02-27T23:21:09.777

1

Try reversing the order of your media queries. The last rule (768px) overrides the others because it is last and has equal precedence to the others.

edited Feb 27 '17 at 23:21

answered Feb 27 '17 at 23:13

Kylos

1,888
14
24

score 1 · Answer 3 · answered Feb 27 '17 at 23:16

You are matching whatever query has come last. This become easier if you are explicit with your media queries - use the and operator so the order is not important.

For example for the small band: (min-width: 768px) and (max-width: 991px)

So this media only applies for widths between 768px and 991px.

You would apply this right up to a pixel below the next band. For the top band you don't need a max width.

score -1 · Answer 4 · answered Apr 27 '21 at 08:38

-1

In my case it stopped working because some css definition above was missing closing "}".

answered Apr 27 '21 at 08:38

luky

2,263
3
22
40

media query min-width not working

4 Answers4