I'm Stuck! Media Queries 6/10

Hello I am confused by the instructions:

Navigate to the first media query you wrote at the beginning of this lesson where you targeted screens with a min-width of 320px and a max-width of 480px.

Let’s also make the logo and text appear vertical if the screen is in a portrait orientation.

Add another media feature to the rule, using a comma (,) to separate rules. The second media feature should check if the screen’s orientation is portrait.

This is what I wrote and I pass

@media only screen and (min-width: 320px) and (max-width: 480px) , (orientation: portrait) {
  .gallery-item .thumbnail {
    width: 95%;
  .logo .page-description{

But how is that possible

  1. I ended up with three conditions, how does it know how to evaluate them? I wanted to add parenthesis, but it doesn’t like it, how does it know to do the min/max first and then take the “or” portrait? (min-width: 320px) and (max-width: 480px) , (orientation: portrait)

  2. I never entered anything after .logo .page-description (because I don’t know how to make it go vertical) so how come I passed?

So I am stuck not because I cannot make it work, but because my incomplete code works.
What gives?

url to class is https://www.codecademy.com/courses/learn-responsive-design/lessons/media-queries/exercises/comma-separated-list?action=lesson_resume&link_content_target=interstitial_lesson

A comma will create separate media queries, so it should know how to evaluate a list like that. In terms of order it doesn’t matter, because in logic OR (using the comma in this case) will evaluate to ‘true’ if any of the conditions are true.

As for the second question, the SCT (Submissions Correctness Test) sometimes misses checks, leading to incorrect or incomplete code passing the lesson, regardless of the instructions.

EDIT: If you want to make elements appear one below the other, try using display: block (which should actually be the default display style if none are set)

1 Like

I am getting an error message on this same exercise. The error message reads: “Did you include a comma between the media query’s media features?” Here is my code:

@media only screen and (min-width: 320px), (max-width: 480px), (orientation: portrait) {
.page-title {width: 270px;}
.gallery-item .thumbnail {width: 95%;}
.logo {orientation: portrait;}


Can you help me understand the error message? I feel like my answer is, “Yes, I did.” I’m not sure what to do next in order to pass.

I cant pass this exercise too. the question is confusing. can someone post the solution please

I am also facing the same problem with 6/8
it is asking me whether i put a comma between media query features even though I include a comma .How to solve thin?any suggestion,please?

Plain English translation for your media query as you’ve written it:
If any of these three things is true, then apply the styling:

  1. screen is wider than 319px
  2. screen is narrower than 481px
  3. screen is in portrait mode

You see the problem? Any screen at all is going to trigger either that 1st or 2nd condition.
A 200px wide screen is less than 481px wide, so it’s true.
A 20000px wide screen is wider than 319px, so it’s true.
Your third condition doesn’t even factor in.

What we want to say is:
If either of these two statements is true, then apply the styling:

  1. Screen is at least 320px wide and at the most is 480px wide
  2. Screen is in portrait mode

As you wrote it:
@media only screen and (min-width: 320px) , (max-width: 480px) , (orientation: portrait)

As it should be:
@media only screen and (min-width: 320px) and (max-width: 480px) , (orientation: portrait)

It’s kind of tricky because the correct syntax uses a plain language “and” while instead of using a plain language “or”, they want you to use “,”.

1 Like

noot is not worrking please help me

If you have a space too much than it doesn`t work.

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