Learn CSS Grid by Building a Magazine - Step 79

HTML-CSS
1

I cannot for the life of me complete this step.

Instructions:

Step 79

Create a third @media query for only screen with a max-width of 550px. Within, create a .hero-title selector with a font-size set to 6rem, a .hero-subtitle, .author, .quote, .list-title selector with a font-size set to 1.8rem, a .social-icons selector with a font-size set to 2rem, and a .text selector with a font-size set to 1.6rem.

My code:

@media only screen and (max-width: 550px) {
.hero-title {
font-size: 6rem;
}
.hero-subtitle, .author, .quote, .list-title {
font-size: 1.8rem;
}
.social-icons {
font-size: 2rem;
}
.text {
font-size: 1.6rem;
}
}

Error message:

Test

Sorry, your code does not pass. Hang in there.

Hint

You should have a new @media query for only screen with a max-width of 550px. This should come after your previous two.

2

Please provide link to the task and format your code(instruction below).

3

add space in between

4

Try copy this code, make sure to check all the space.


Mod edit: solution redacted
5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.