Submitted over 1 year ago

QR Code Component - Visual Studio Code

Devon Daniels• 160

@DevDan21

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

This challenge was relatively easy based on what I already know about HTML & CSS. Styling this was pretty straight forward when it came to the fonts, font-sizes and the image. As well as keeping this responsive for desktop and mobile.

My process was to complete the layout before centering the design. Once it came to that did I hit my first speed bump. Centering elements on a page seems to be a simple process however I've always had difficutly figuring it out. From using different methods like flexbox, grid and the famous absolute position. I decided to use flexbox for this solution however in future projects I think I would try absolute positioning again to get a bit of a refresher and to challenge myself more.

Once I was done I had a look at my code again to clean it up and make it more efficient. Overall this was a fun and quick project to build and I am looking forward to the next one.

What is your best case in centering elements on a page? I would love to know how and why you use a particular process to do so.

Happy coding everyone! DevDan

Community feedback

ify47• 360

@ify47

Posted over 1 year ago

You should move all the codes in your main css to body, also add a flex direction: column to it and make your min-height: 100vh, By applying these styles to the body element, you create a flex container that centers its child elements both vertically and horizontally, I hope this has been helpful. Overall, this is a good solution :)

Marked as helpful

Devon Daniels• 160

@DevDan21

Posted over 1 year ago

@ify47 I tried it out and it works! Thanks so much for your help. Not only did you help to clean up my code a bit but also I've learnt something new. I appreciate that. Thank you! :)

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