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

Utilisation de CSS Flexbox

@iTwiixZ

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Dan 300

@dtp27

Posted

Hi Alexis!

Pretty good solution overall! A few things I would recommend:

  1. I see you're using Flexbox in the card. I would also use it in the body, since that will then center your entire card on the page. Also include min-height: 100vh; in the body to ensure the content takes up the whole page (i.e. it'll be centered relative to the entire page). 2 . I would also change the width property in your img to max-width: 100%;. This will ensure the image scales down responsively with smaller screen sizes.
  2. I recommend setting the base font-size in the body, then using rem to scale fonts from the different elements up and down. This can make it easier to control all of the fonts.
  3. I don't think you need those <br> elements in your paragraph to match it "line-for-line". Pay attention to the design font sizing and weights, and it should take care of itself.

Let me know if you have any questions or thoughts.

Happy coding!

Dan

Marked as helpful

1

@iTwiixZ

Posted

@dtp27 Thank you for the review! It's been a while since I used html and pure css !

I would apply this for the next :D

1

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