Skip to content
Submitted 6 months ago

Semantic HTML5 markup, CSS custom properties, Flexbox

Williams Akanni•350
@shadowbanks
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

What I would do differently next time I'll pay better attention to the design and make up a plan before starting (At least mentally).

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

The image had extra spaces at the sides(larger than expected), the issue was I flexed the container then justify-content and aligned-items center while also giving the image a fixed size, this caused extra space at the left and right sides.

My Fix: Removed the justify-content and aligned-items center, then made the image take 100% of the width and height of it's parent.

Edit: Improved solution, set the container box-sizing: border-box;

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

I want to know if I'm using the right tags.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Trần Thành Danh•1,500
    @TranDanh1122
    1. your github link is error/private, i cant view repository
    2. about tag:
    • "Improve your front end..." must be h1 tag, if you have multi card, that shoule be h2, if multi card in one section of large page, that can be h3, that how SEO rule work
    • you need css reset *{margin:0; padding:0; box-sizing:boder-box}, that will make you can "full" control of element spacing, now i see p element auto margin it -image need object fit: cover or contain, let learn about it hope that helpful!!!!

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