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

QR Code Component using HTML, CSS and Grid

@burgosha

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


What strategies other than my solution do you use or know to center elements on a web page?

Community feedback

Jason 👾• 160

@super-gill

Posted

I used flexbox but grid is another CSS tool that would work, the major css frameworks build upon these for even more flexibility and responsiveness. Take a look at flexbox in particular but also grid, heres a handy poster I use all the time:

Flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

TBH on this site you will want to use the absolute crap out of both of these, often together.

Marked as helpful

1

@burgosha

Posted

@super-gill Hi! and thank you for your reply! I have seen your code and I found interesting your solution with flexbox. I will surely try it in the next challenges. In this challenge I tried to use flexbox but I failed. I wanted to use flexbox with a parent div element, but I couldn't center the card. I didn't imagine (actually I didn't know) that it could be used in <body>. Thank you very much!

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