Submitted about 1 month ago

QR code component challenge

Eya-ben-aziza•30

@Eya-ben-aziza

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I delivered a result that is most likely identical to the design given. if it's not the case please let me know for next projects, I would use other ways to position my element in the center. this time I used margin-top and margin-left properties but I am sure it's not the best way to do it as I tried multiples values to get the right position.

What challenges did you encounter, and how did you overcome them?

the project is simple but I had two major challenges: 1- how to center the block element , so I used "transform" property transform: translateX(-50%);

2-how to add responsiveness (I am new to it): so I used media queries I am sure that the responsiveness is not perfect so a feedback on this would help

What specific areas of your project would you like help with?

I would like some help with the responsiveness part and thanks for your time.

Community feedback

Svitlana Suslenkova•5,360
@SvitlanaSuslenkovaPosted about 1 month ago
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
Marked as helpful
0
Eya-ben-aziza•30
@Eya-ben-azizaPosted about 1 month ago
@SvitlanaSuslenkova it worked perfectly, that was helpful, thanks a lot.
0

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