CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Kareem Abdelwahed
Kareem Abdelwahed

Reputation: 186

media queries min width doesn't work

I have two media queries.

@media (min-width: 1300px) {
    .container {
        width: auto;
        max-width: 1360px;
    }
}
@media (min-width: 1565px) {
    .container {
        width: auto;
        max-width: 1576px;
    }
}

whatever the width is. the container always as the first media query. I mean when the width of body is 1570px the container width still 1360px !

Upvotes: 3

Views: 4504

Answers (5)

fotijr
fotijr

Reputation: 1096

It's important to set the viewport in the HTML <head>.

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

Upvotes: 10

Srikanth Reddy
Srikanth Reddy

Reputation: 345

Try this...

@media only screen and (min-width:1300px) and (max-width: 1564px)  {
    .container {
        max-width: 1360px;
        width: 100%;
    }
}

@media only screen and (min-width:1565px) {
    .container {
        max-width: 1576px;
        width: 100%;

    }
}

Upvotes: 0

user6481449
user6481449

Reputation:

I believe there are other ways to achieve what you are looking for. I would not advise you to stack up min-width queries like that, but rather design your website to behave in a certain way regardless of the minimum width, and only use the media queries for smaller screens, using max-width.

Upvotes: 0

krozaine
krozaine

Reputation: 1531

You can try something like this:

@media only screen and (min-width:1300px) and (max-width: 1565px)  {
    .container {
        width: auto;
        max-width: 1360px;
    }
}

@media only screen and (min-width:1565px) {
    .container {
        width: auto;
        max-width: 1576px;
    }
}

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

Just reverse the @media query order.

@media (min-width: 1565px) {
    .container {
        width: auto;
        max-width: 1576px;
    }
}

@media (min-width: 1300px) {
    .container {
        width: auto;
        max-width: 1360px;
    }
}

Upvotes: 1

Related Questions