CODEWITHSUNDEEP
cssmedia-queriesscreen-resolution
caioskornicki
caioskornicki

Reputation: 13

My media query is not working when I add a resolution criteria, what can I do?

I have been developing a website for a competition I'm engaged in and to add some responsiveness to my website I decided to use media queries.

I tried using a variety of different codes to assign resolution to my media query but none of them work. I currently use a Mac Book Pro retina.

@media screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {

The code presented is not working, but when I delete the min-resolution it works nicely. I'm not sure if not having it will end up in some kind of problem in the future because every website that I consulted until now had some kind of min-resolution criteria.

Upvotes: 1

Views: 1162

Answers (1)

Ameer
Ameer

Reputation: 2000

I believe the issue may be that the and between (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) must be turned into (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)

I hope this helps!

Here's a css-tricks tutorial about retina display which may help: https://css-tricks.com/snippets/css/retina-display-media-query/

Upvotes: 0

Related Questions