Media Queries


Having an issue with Media Queries and this particular exercise:

Write a media query to make the logo higher quality if the visitor is looking at the Amazing Space website on a high resolution display.

A high resolution display may have a min-resolution of 150dpi.

Inside of the media query, add this CSS property to the .logo class:

background-image: url("../img/spaceship@2x.png");

The code I have written is:
@media only screen and (min-resolution: 150dpi) {
.logo {
background-image: url("../img/spaceship@2x.png");


However the logo doesn't change - I know my screen resolution is fine, as doing this on a MacBook. Please help - so stuck with this and don't understand where I'm going wrong. I get the "tick" to say I've done this correctly.