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 CARD CSS FLEXBOX

RoxySash 60

@RoxySash

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 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

Community feedback

P
Zugim 60

@Zugim

Posted

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 👍

0

@eduardo5010

Posted

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

0

RoxySash 60

@RoxySash

Posted

Yes I see that thanks I will try to figure out where I went wrong @eduardo5010

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