FAQ: Media Queries - Comma Separated List

This community-built FAQ covers the “Comma Separated List” 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 Comma Separated List

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!

If a @media selector has both “and” and “,” (or) conditions, when is the CSS applied. If it satisfies all of the “and” conditions and if it satisfies at least one of the “,” conditions?

1 Like

I could be wrong but I believe you consider the “and” conditions as a single unit. Therefore, width: 95% takes effect in all three of the following situations:

  1. (min-width: 320px) and (max-width: 480px) = true

  2. (orientation: portrait) = true

  3. (min-width: 320px) and (max-width: 480px), (orientation: portrait) = true

Please correct me if I’ve made any errors here.

I get what your saying. Now if the orientation in your scenario was landscape would it keep the whole rule from applying? With a mixture of “and” and “,” it gets a bit confusing.

How do we avoid ambiquity here? I mean this snippet could be rendered both as ((min-width: 320px) and (max-width: 480px)), (orientation: portrait), that would mean that the code executes either if the screen is 320 - 480px OR has portrait orientation;
and in the same time it can be rendered as (min-width: 320px) and ((max-width: 480px), (orientation: portrait)), which would mean that the minimum screen-size required for the code to execute is 320px AND either the maximum size has to be 480px or orientation has to be portrait. And if it IS portrait, then the maximum size can be anything, even like 750 px… ?
So which of the two conditions is relevant here, and why?
Thank you in advance and sorry for the massive and obscure question :)))

1 Like

Comma Separated List exercise.

@media only screen and (min-width: 320px) and (max-width: 480px), (orientation: portrait) {
.gallery-item .thumbnail {
width: 95%;
}
/*ruleset for 320px - 480px */
}

I don’t understand why this code is effecting the rocket logo. .gallery-item element is the white bordered boxes. .thumbnail element is the images within them.
The rocket logo is within .logo element so how does this make the rocket logo appear vertical when in a portrait screen?

Thanks in advance : )

1 Like

I’m also wondering about the same question… it seems that part of the task is missing, unless there’s something else?

Are the parentheses merely for readability or are they mandatory?

The third set of media features translate to:
Only apply the rule sets inside the media query if:

  • The screen used to view our web page has a width that is at least 320px wide
  • Either the screen used to view our web page has a width that is less than or equal to 420px OR the device used by the user is in portrait mode

That’s how I understood it. Anyone, please correct me if I’m wrong

In a way, (max-width: 480px) is useless

1 Like

It doesn’t. That’s just a mistake in the lesson

If the orientation media feature in CSS calls a page’s orientation ‘landscape’ if it detects more width than height, are pages viewed on PCs considered landscape and get that styling? (most browser display more width than height)

It doesn’t actually have to do with the display at all! It has got to do with the size of the browser window. A window is considered landscape when it has a greater width than height and is considered portrait when it has a greater height than width

it took me a while to understand this orientation feature, i searched for more info about this feature on google.
then i decided to check it live, i wrote a rule set that chnges the text color to red, if the orientation that specified in the rule is true :

@media only screen and (max-resolution: 150dpi) and (max-width: 480px), (orientation: portrait){
.page-description {
font-size: 20px;
color: red;
}
}
in this example the color on the text changed from red to white as i resized the web page to be wider

@media only screen and (max-resolution: 150dpi) and (max-width: 480px), (orientation: landscape){
.page-description {
font-size: 20px;
color: red;
}
}
in this example the color on the text changed from white to red as i resized the web page to be taller

so thank you for your comment, helped me a lot to find the answers.

2 Likes

For a better understanding of this lesson, I advise you to write the following :

@media only screen and (min-width: 1000px) and (max-width: 1100px), (orientation: portrait) {
  p { color: yellow;}
}

It will show you a more contrasting example.
This `@media’ with “,” requires one of the states we have written on either side of it to be executed.