Comma Separated List


#1

What do I do I don’t understand and also when I try and load the answers it won’t load

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.

could someone simplify this for me


#2

Hey @oliverrocks969 lets take this one step at a time and try to look at the first task

Side note:
If you have more questions in the future, it’s good to know how to format your code in the post so that it’s easier for others to offer their help. You can refer how to format code here.

For the right advice or code review, share the lesson name, the webpage link, the step you are struggling on, also the code you tried and sometimes the error message that pops up. :thinking:
All of this information is really helpful for you to mull over and it introduces us to the problem so we can point you in the right direction in a quickly :handshake: :tada:


#3

Hi thanks for responding to me :slight_smile:

Working through the first part it says "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."
Here I looked at the first code I wrote which was in part 2. Media Queries which was this:

@media only screen and (max-width: 480px), (orientation: portrait) {
  .page-title {
    width: 270px;
  }
}

Then I read the second part “Let’s also make the logo and text appear vertical if the screen is in a portrait orientation.” Looking at this again I’ve now found the code for the logo:

.logo {
  height: 80px;
  width: 80px;
  background-image: url("../img/spaceship.png");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  top: 1em;
}

So I figure that when it is referring to the logo it is the rocket at the top. It then says to “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 where I’m most confused because I’m not sure what rule it wants me to add to. I’m not sure whether it’s the media rule I put before or whether it’s one of these:

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .gallery-item .thumbnail {
    width: 95%;
  }
}
@media only screen and (min-resolution: 150dpi) {
  .logo {
    background-image: url("../img/spaceship@2x.png");
  }
}

Or something else entirely.

Thanks again


#4

Hey late reply here :wave: my computer was in for repairs :hammer_and_wrench:

@oliverrocks969 great formatting and explanation :clap:

OK – So it looks like you are on the lesson found on this webpage, Comma Separated List
and the following task is referencing the work that was done earlier on, Media Queries

In Comma Separated List we learn that separating a media feature with a comma works similarly to the or operator || because the media rule will work – with (at least) one of the separated media features

As in the previous lesson, Media Queries, they want you to add the (orientation: portrait) media feature to the existing media query rule that has a range for the screen size or viewport :smile:

@media only screen and (min-width) and (max-width), (orientation) {
/*our css rules and declarations*/
}

I was able to pass the task without adding code to the .logo class rule


#5

Or more accurately, will work with either. Remember, OR short-circuits on TRUE.