Learn CSS Grid by Building a Magazine - Step 79

HTML-CSS
1

Tell us what’s happening:
It is telling me to do what I have already done and I am cross-checking with my work above.

Your code so far

@media only screen and (max-width: 720px) {
.image-wrapper {
grid-template-columns: 1fr;
}
}

@media only screen and (max-width: 600px) {
.text-with-images {
grid-template-columns: 1fr;
}
}

…

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

…

HINT: Your new @media rule should have a .hero-title selector, a .hero-subtitle, .author, .quote, .list-title selector, a .social-icons selector, and a .text selector. These selectors should be in this order.

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Learn CSS Grid by Building a Magazine - Step 79

Link to the challenge:

2

Hello and welcome to our forum.
Your first selector shouldn’t be .hero-subtitle

Then remove the space here.

1 Like
3

Thank you Stephen you are a legend!

1 Like
4

You are welcome mate

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.