QR Code Component Reponsive Solution

hey good job on this challenge! your report above shows a few issues though:

• wrap everything in your body in <main> OR use semantic tags! if you're using div right after body, then give them a role=""; however, it's a little frowned upon to use role right after body, so try to stick with semantic tags instead. you can read more about landmarks here
• you should have at least one <h1> in your webpage

here is a list i made of accessibility issues & best practices

hope this helps :))

Hay ! Good Job you made it look nearly perfect to the preview

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container

-> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

-> But use header tag only once in main heading element.

Keep up the good work!

As far as media queries are concerned, I also thought that this would require one, however, I remembered that this was meant to be easier and that I was probably overthinking it. In fact, I had nested media queries.

Like you, I also used vw for the card. But found that it kept getting stretched out in larger monitors, when I really, it needed to remain the same size.

So I changed my approach and instead of using vw, I used max-width: 16em on the card. That eliminated the need for media queries for me, and it still worked at each size I simulated in the dev tool.

Hello there! Awesome work with this challenge. Looking at your solution, I would only suggest this for you...

• Inside the.qr-code-card adjust the padding into padding: 1em; and border radius into border-radius: 1rem;
• Add padding-bottom: 1rem; in the .qr-code-message rule set
• Wrap the root with specific tag like main and attribution with footer tag for readability
• Import the attribution style in the CSS file and remove style tag

Hope this helps. Keep it up!