Submitted about 1 year ago

Responsive QR code component using CSS flexbox

Raptor0x1•210

@Raptor0x1

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

Next time instead of writing style in the head. I will link the CSS style file in the head.
Furthermore, I'll try to use different method for placing the QR code box. For now, I have used flexbox but I want to try other methods such as using position property etc.

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

I made many newbie mistakes such as forgot to

close the quotation mark
set the height of the div element and had issues with image not showing up.

I overcame them using AI tools such as ChatGPT and Phind.

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

Initially for setting the position of the container-card box I thought to set the width and height to auto.
Later I realized that when set auto, the element get equal spacing from left and right but it can only be applied to width. It doesn't work on height.
So is there any way to use this method (width: auto and some other properties) to align the box in the center of the body.

Code

Please log in to post a comment

Community feedback

Koda👹•3,830
@kodan96
Posted about 1 year ago
hi there! 👋

you can center your content with Flexbox if you apply these to the body tag:
```
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
```
Hope this was helpful 🙏

Good luck and happy coding! 🙌

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