Changing Spaceship Logo for >150dpi not working?


#1

So I entered all of my code right and was able to move on, but the logo never changed to the blue finned spaceship (to test I put the blue fin ship's file path into the original (aka NOT the media query) src and saw what it was supposed to look like). I have DPI of 166, but to be thorough I tried lowering the dpi threshold down to 10dpi and it still didn't appear.

Anyone know why?

@media only screen and (min-resolution: 150dpi) {
  .logo {
    background-image: url("../img/spaceship@2x.png");
  }
}

#2

Hello Hedyb, you didnt see any changes in color because I strongly believe the resolution of your computer screen is a major factor. So try using this feature in your code (min-resolution: 90dpi). This works so well for my 1366 X 768 display screen. so the wings turn blue when I use (min-resolution: 90dpi) but revert to green when I use (min-resolution: 150dpi). Let me know whether it works for you :wink:


#3

This was bugging me (pardon the pun) so I had to keep going until I figured it out.

Instruction 2 was marked as correct, but spaceship@2x.png hadn’t appeared. I have a MacBook Pro (Retina, 15-inch, Late 2013) which apparently has a resolution of 220dpi and I set the dpi as low as 10dpi and it still failed to display in Safari 10.1.1. I’ve tested it in Chrome 60.0.3112.101 and it works fine at 150dpi. I’ve requested for a note about Safari to be made in the instructions.