Learn CSS Grid by Building a Magazine - Step 79

Tell us what’s happening:

@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;
  }
}

This is my code for step 79 of the magazine project.
I have done everything as asked in the instructions I am getting:
“You should have a new @media query for only screen with a max-width of 550px. This should come after your previous two.”

Your code so far

<!-- file: index.html -->

/* file: styles.css */
/* User Editable Region */

@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;
  }
}







/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Grid by Building a Magazine - Step 79

hi there!

your code is working from my end. clear your browser cache, desable dark mode, close extentions if you have any or change the browser and try again.