CODEWITHSUNDEEP
cssresponsive-design
Naftuli Kay
Naftuli Kay

Reputation: 91630

Responsive design for different resolutions in the same stylesheet

I'm trying to create a little patch for one of my favorite video sites using the Stylish Chrome extension and a bit of media query magic:

@media screen (min-width: 1920px, max-width: 2559px) {
    div#player div#player-api {
        width: 1280px;
        height: 720px;
    }
}

@media screen (min-width: 2560px) {
    div#player div#player-api {
        width: 1920px;
        height: 1080px;
    }
}

Unfortunately, it seems that I'm always matching both conditions, as if the media queries aren't being required at all. Is the above valid CSS? Do I have the right idea for dynamically scaling an element with CSS based on browser size?

Upvotes: 1

Views: 1192

Answers (2)

Akshaya Raghuvanshi
Akshaya Raghuvanshi

Reputation: 2277

You only missing some small things.

@media screen and (min-width: 1920px)and (max-width: 2559px) {
    div#player div#player-api {
        width: 1280px;
        height: 720px;
    }
}

@media screen and (min-width: 2560px) {
    div#player div#player-api {
        width: 1920px;
        height: 1080px;
    }
}

I suggest you a good blog on Mediaqueries for further reading.

Upvotes: 1

Natalie Hedström
Natalie Hedström

Reputation: 2631

Try @media screen and (min-width: 1920px) and (max-width: 2559px)

Upvotes: 0

Related Questions