Learn Accessibility by Building a Quiz - Step 66

What’s happening:

I can’t seem to figure out why my code is failing the test case. Could someone please help me understand if there is an error in my code or if its a browser issue (I’m using Safari on a MacBookPro).

The error message I’m receiving is: “You should wrap the existing * rule within the @media rule.”
My code for the solution is attached below.

My code:

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15

Challenge: Learn Accessibility by Building a Quiz - Step 66

Link to the challenge:

Hi Enerjade,
Your code looks like mine and I am getting the same message. I am wondering if it is a browser issue since no one else has commented on your question. I was using Google Chrome when I started this lesson and ran into a browser issue even with all my extensions deactivated or deleted (which you may want to check in your current browser). I switched to Microsoft Edge to complete this tutorial and now I am wondering if I am having another browser issue?

Hopefully someone “in the know” will let us know.
Peace, Enerjade.

It could be. If you are using a really old browser then it might not support prefers-reduced-motion. So make sure you are using a very up-to-date browser. If you are, then it could possibly be an extension?

I’m using a new browser that has been updated this week. I only have one extension, the Web Threat Shield. It is on both my Chrome and Edge browsers, but was deactived while I was working on the tutorial.

Thank you for your input, it’s frustrating to continue to have browser issues with this one tutorial. What browsers have you had the best luck using for these tutorials?