Submitted over 1 year ago

QR code component

#accessibility

Yacine Kahlerras• 790

@yacineKahlerras

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

i tried to make this one as pixel perfect as possible by measuring elements from the design on figma.

also i tried to familiarize myself with figma since i never used it before, turns out its pretty much like illustrator so i kind of found myself at home

Community feedback

Adriano• 33,990

@AdrianoEscarabote

Posted over 1 year ago

Hello @yacineKahlerras, how are you?

You did a great job on this challenge, I really liked your layout and congratulations on achieving a pixel perfect.

Figma really helps a lot, I have some tips that I think you will like:

1- I noticed that the layout is breaking at 320px, I made some changes to the code to further improve the responsiveness of the project:

@media (max-width: 320px) { main { width: 100%; } img { width: 100%; } }

The rest is really good! Hope it helps... 👍

Marked as helpful

Yacine Kahlerras• 790

@yacineKahlerras

Posted over 1 year ago

@AdrianoEscarabote done, thank you 🙏

Adriano• 33,990

@AdrianoEscarabote

Posted over 1 year ago

@yacineKahlerras no problem! keep coding

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year ago

Hi Yacine Kahlerras,

Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor.

In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser. Then you can remove the position absolute from the <main>

width: 21.27rem; an explicit width is not a good way to have a responsive layout. Consider using max-width to the card.

Hopefully this feedback helps.

Marked as helpful

Yacine Kahlerras• 790

@yacineKahlerras

Posted over 1 year ago

@PhoenixDev22 done 👌 thanks for the body padding trick am gonna use that in the future

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year ago

@yacineKahlerras

Glad to help. Happy coding!

Yacine Kahlerras• 790

@yacineKahlerras

Posted over 1 year ago

@PhoenixDev22 I also have a question is using the absolute translate(-50%,-50%) thing to center elements bad and doesn't work on some devices ?

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