FAQ: Media Queries - Dots Per Inch (DPI)

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Dots Per Inch (DPI)” exercise from the lesson “Media Queries”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn Responsive Design

FAQs on the exercise Dots Per Inch (DPI)

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Never realised my laptop screen wasn’t high resolution until now :smiley:

9 Likes
3

My display resolution is : 1366 x 768 = 1049088. Is this my dpi? Also, the rocket logo had blue wings from the beginning of the exercise, so I didn’t see a change when I added the media query to double the resolution. Why is that?

2 Likes
4

Lmao, I was literally going to make the same post!

2 Likes
5

Doesn’t work on Retina display

4 Likes
6

Thanks for the explanation - I was wondering why I couldn’t get it to display the higher resolution image on my MacBook Pro (which definitely has a high enough resolution) when the code was correct!

1 Like
7

Is there someone who sees the blue wings?.. I’ve decreased min-resolution to 1dpi and still have no changes in the logo… (my laptop doesn’t have Retina display).

6 Likes
8

Same here. MBP Retina changed the min res to 1dpi but still no blue wings. :slight_smile:

1 Like
9

I’m glad I checked the forums and realized I wasn’t the only one having this issue. Hopefully this is resolved in the future. :smiley:

4 Likes
10

I have a retina display and I was able to see the blue wings on the spaceship. My MacBook pro is a 2018 model. So i’m not sure why no one else is getting the results.

11

Only way I got the blue wings on my 5k iMac was by editing the url link (not @media) in the main CSS code to the @2x image. My code confirms correct:
@media only screen and (min-resolution: 150dpi) {
.logo {
background-image: url("…/img/[email protected]");

}
}

12

Did you get your Answer because i want it too

13

Got it! here is the method to check your current dpi How to check dpi

3 Likes
14

not sure if this is a good place to ask but I don’t really want to raise an issue with support (I guess they may be getting a lot of load with all donated pro accounts).

Anyone else doing this part of the course and several earlier in css styling and getting horribly long (minutes) wait after hitting ctrl+enter/run?

My solutions are correct and eventually get approved, and I’m getting the same results on win and linux regardless of the browser so I guess it must be server-side :frowning:

2 Likes
15

Mine has slowed down a fair amount over the past couple of weeks and times out more often

16

Hi, I just found out here that Safari is not compatible with this CSS feature (resolution).
It seems that this may the reason it’s not working…

4 Likes
17

Interestingly mine has a resolution of 1920 x 1080, thanks to @m.abdullah-zubair for the direction on how to check for it.
Yes, I tried and I got the blue wings but at 108dpi. Any further attempt to increase the dpi takes wings back to normal color. Very interesting.

1 Like
18

Any chance it’s down to browser compatibility? Any work-arounds?

19

For some reason the low-resolution rocket is not displaying anymore in mine exercise even if I delete @media ruleset.

And yeah I was surprised when I got blue wings on only 120dpi with my 1920x1080 I thought it’s high quality display :slight_smile:

20

OK, so like everyone else here, my rocket fins didn’t change colour. My code is correct, latest version of chromium etc. I honestly don’t care enough at this point to waste time looking for a solution. Life is too short, I have a check in the exercise completed box and I’m moving on. Right after I finish this rant.