Submitted over 2 years ago

QR code component - HTML & CSS

Darrick Fauvel• 340

@DarrickFauvel

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Kacper Kwinta• 1,405

@kacperkwinta

Posted over 2 years ago

Hi :)

Looks nice

If you want to fix these accessibility issues, create <main> element and wrap all other into this 👍

Marked as helpful

Darrick Fauvel• 340

@DarrickFauvel

Posted over 2 years ago

@kacperkwinta Thanks so much for checking out my solution. I really appreciate it.

So, I am using the semantic elements <main> and <footer> in my code. I'm sure there is much more to do for accessibility. Is there a tool to check accessibility and make suggestions?

EDIT: Oops! I just noticed the accessibility report on this page. I guess that may answer my question.

Darrick Fauvel• 340

@DarrickFauvel

Posted over 2 years ago

@kacperkwinta No accessibility issues reported now! 🥳 Thank you. 👍

Web Wizard• 5,690

@rsrclab

Posted over 2 years ago

Hi, @DarrickFauvel ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

The only thing I like to recommend is to add max-width: 100% on card element, so that it won't goes over screen width on smaller devices.

Cheers ~

Marked as helpful

Darrick Fauvel• 340

@DarrickFauvel

Posted over 2 years ago

@tymren608 Wow. I thought I was just posting into the void. Thank you so much for looking at it and providing feedback. This is my first posted solution.

So, when I implement max-width: 100% on the .card element, it expands without the max-width: 32rem constraint. Is there a better way to constrain it to the size of the design?

Web Wizard• 5,690

@rsrclab

Posted over 2 years ago

@DarrickFauvel ~

You can use media query to reclaim max-width of the element.

Cheers!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord