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 page using HTML and CSS

@MARCUS-IMPERATOR

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 specific areas of your project would you like help with?

Thanks to @PedroP16's solution, I was able to solve the centering problem. It still needs some work, so if you have any suggestions to improve this, please do share.

Community feedback

3kori 80

@3kori

Posted

Hi @MARCUS-IMPERATOR,

Congratulations on completing this project. It looks amazing!

I'd like to offer some suggestions to improve the solution:

  • Set these global styles to avoid spacing and layout issues caused by browser default styles.
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  • Great job on using flexbox to center the container. Add min-height: 100vh; to the body to help with the centering.
  • To avoid squishing the container when changing screen sizes, consider using a high percentage for the container's width.
media screen and (width: 750px)
.container {
    width: 95%;
}
  • Finally setting padding for the body isn't necessary.

I hope you find this helpful!

Marked as helpful

1

@MARCUS-IMPERATOR

Posted

@3kori Thank you so much, I will incorporate these changes right now.

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