Skip to content
Submitted about 3 years ago

QR CARD CSS FLEXBOX

RoxySash•180
@RoxySash
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?

I am proud that I completed this. It took a while but its complete.

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

I couldn't figure out why there is a scroll bar. It was hard to structure all the divs I made.

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

Flexbox and centering elements

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Zugim•80
    @Zugim

    It looks great! Apart from the sizing it is looking super close to the original design.

    To maybe fix the sizing I would look at removing the div blue-area-behind and instead applying the blue background colour directly to the body. If you then make the body display property flex hopefully you will be a bit closer to the original design.

    It's worth noting that children of elements that display as flex automatically become flex-items so should shouldn't need to set all of your elements to display flex.

    When I was first learning flexbox this course by Wes Bos really helped me out.

    https://flexbox.io/

    Really good job! Keep it up 👍

  • Eduardo Santos Ferreira•10
    @eduardo5010

    The result is very good, only the page size is apparently smaller than the original design. Sorry for my bad English.

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