Submitted 11 months ago

Completed QR code challenge using HTML & CSS

Ahmed Khalifa• 10

@IamAhmedKhalifa

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

One thing that I struggled with is to make it more mobile responsive i.e. when the height is shortened. Feedback is welcome on on how best to do that. One day, I'd like to experiment with different wireframe for mobile.

I've also tried my best to experiment with using Flexbox and for centre alignment. I hope I've done it well, but I do wonder whether I have followed best practice and/or if I have overcomplicated it. If you have feedback about that, that would also be great.

Community feedback

Miguel Angel• 270

@77iu

Posted 11 months ago

Hello, I'm Miguel

So that main or any other element is centered, I suggest the following:

body{ max-width:1440px; height:100vh; display:flex; align-items:center; justify-content:center; }

Tell me if this information was useful to you 😃.

If you like animated buttons I invite you to visit [https://youtube.com/@77iu-CSS?si=sbpP_EDa8PN6Zvak]

Greetings from Argentina!!👋👋👋

Marked as helpful

Ahmed Khalifa• 10

@IamAhmedKhalifa

Posted 11 months ago

@77iu that's very useful Miguel, thank you for sharing your tip. It worked nicely :)

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