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

CSS FlexBox

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

@Aliyu-Saidu

Posted

Hi Mohamed Firas Ben Othmen, Congratulations for successful completion of this challenge. Here are some tips which I feel will help you improve your code.

  • your design doesn't look good on desktop (not been properly centralised both vertically and horizontally). This is because you did not specifically state the height of the section container (with a class of d-flex). Setting the flex property (align-items: center) when the flex direction is row, requires stating the height of the flex container to be more than the overall content height. Otherwise, the effect will not be felt. So you may consider setting the height of the flex container (here in this case section with a class of d-flex) to be 100vh. This should solve the problem.
  • To increase the accessibility of your website, you may wish to visit the accessibility report links provided for you above. It is self explanatory. But for this challenge, you could just replace the 'section' element with 'main' element. Hope this help.

Please click the helpful button below if you find this feedback helpful. Thanks.

If you also wish to discuss this further, I am always available and more than happy to help.

Marked as helpful

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