Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CSS and HTML QR Code

@WhaleMentalist

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Centering the card vertically was probably the hardest part. Ended up using a parent 'div' element as a 'flexbox' to center horizontally and vertically. The challenge didn't call for a responsive design, so I wasn't sure if there was supposed to be two solutions one for mobile and one for desktop. I ended up submitting the desktop version. Hopefully, I did't stray too far from what is ideal.

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

Hi, Spencer Daniel! 👋

You are already in the right direction by using flexbox to make the card in the middle of the page and setting a max-width to the card element. The reason why this is a good challenge even though you haven't learned about media queries is that you can make the site responsive without any media queries.

If you take a look on the mobile view such as 360px * 640px, you will notice that it looks good. But, you can improve it by adding some padding to the body element to prevent the card from touching the edges of the browser.

I suggest removing the max-height from the card element. Let the content inside it control the height of the card. This way, the card can have more height when it is needed.

I hope this helps! Keep up the good work! 👍

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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