FAQ: Media Queries - And Operator

This community-built FAQ covers the “And Operator” 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 And Operator

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!

Here’s something :
@media only screen and (max-resolution: 150dpi) and (max-width: 480px) { }

This is for the first exercise of the “And Operator” section.
I typed the exact same code and clicked run,got an error. clicked for the solution,
compared my code and the system’s , exactly the same.

1 Like

yeah, sometimes it happens, that’s why before clicking solution button, you wanna copy your code, refresh the page, paste it and run it to see what’s up

Codecademy is pretty unforgiving on typos I have had them where an extra space has caused me to not get the check mark but the code still runs. Its probably a good thing. In the long run. I have definitely become more vigilant of typos because of this.

Is it important that the max-resolution rule is written before the max-width rule? I’m getting an error if I write it with max-width first.

1 Like

Also wrote the queries in this order and got an error …

Can anyone please shed some light on why it’s incorrect?

Codecademy are pretty strict about any small detail, so try to get it exactly as Codecademy did in the lessons. That doesn’t mean your version is wrong, but in the lessons, your code has to be identical to Codecademy’s for it to be correct

does the query type order affect?

Yes, it does. You want it do be something like this:

@media only screen and (a css rule) and (a css rule)

The “@media only screen and” part needs to be in the beginning, but the parts inside ( ) don’t need to be in a specific order.

Not a big deal but the errors the academy throws seem rather quirky to me. Through the example or the direction blurb have they width parameter first and then the dpi request. So then there’s me daring to do it width first and the red error of discontentment thrown!!! :upside_down_face: GAAHHH!!! The logical consistency !! If it doesn’t matter per the academy’s own instructions why insist on dpi first? I mean I did it cause I want to move on in the unit but what a quirky thing :upside_down_face:

1 Like

Tampering with my screen’s resolution had nothing to do with it for me – instead, I just switched browsers from Firefox to Edge, and then all my media queries were displaying correctly. Setting my min-resolution of the spaceship2x logo to 72dpi then did it for me… was wondering if I just couldn’t tell the difference between green and blue anymore lol but it’ll definitely be noticeably blue once it’s working right!

Is there any reason why I need to put (max-resolution) before (max-width)?

If both conditions have to be met, why would that matter?

yh it doesn’t matter

Hi, I was wondering if someone could clarify.

I’m going through the Media Queries syllabus, and I’m reading through the min-resolution portion, and I’m reading lines like “The website’s text needs to be larger for users who have small, low resolution screens. Write a media query that applies when the max-resolution is 150dpi and the screen has a max-width of 480px”.

Can someone explain to me why DPI and screen resolution are being used together here? DPI is printer thing, not a web thing. I could understand it if the training material was talking about creating a printer-friendly version, but not when talking about screen resolution. Shouldn’t it be using PPI instead?

I believe it boils down to the way they are checking to see if the answers you are giving are correct. I think it’s similar to the way we would check to see if someone is entering in the correct email address format. It’s looking for a particular string within the code. Yes, they probably could have checked for both formats, having it transverse, but just be mindful of what order they are asking for the answer to be in because that’s the order they are expecting you to give your answer in.

dpi was originally a term that was used first with printers. Nowadays, it’s also used with computers. For instance, when you change the sensitivity on your mouse so that you can move it faster or slower across your screen to give it more controlled movement, you are actually changing the dpi setting…telling the computer that you want your mouse cursor to move so many dots across the screen at a time.