QR Code Design With HTML and CSS

Solution retrospective
I could do it myself without help
What challenges did you encounter, and how did you overcome them?No challanges
What specific areas of your project would you like help with?Nothing in particular
Please log in to post a comment
Log in with GitHubCommunity feedback
- @justinconnell
Hi @DammyFaffy, Congratulations on submitting your solution!
I noticed that it is not centred on the page so took a look at the code and noticed that you used margins. I assume that using those settings it looked good on your screen, but unfortunately there are may screen sizes that need to be considered when implementing a design - to get elements centred on the screen there are two good options to use:
- FlexBox documented here
- or CSS Grid documented here
The trick is to have a container that takes up
100vh
(100% of the viewport height) and100vw
(100% viewport width) and then to centre the child element in the container element.In your code this can be done with the following changes:
body { height: 100vh; background-color: rgb(213, 225, 239, 255); /* width: 1440px; */ display: grid; place-content: center; } .container { /* margin-top: 200px; */ /* margin-left: 760px; */ /* margin-right: 700px; */ background-color: white; height: 500px; width: 325px; padding-left: 20px; padding-top: 20px; border-radius: 20px; /* overflow: hidden; */ }
Note, I commented out the unnecessary code above. I do have a question though - why did you set 'overflow: hidden'?
I hope you find this feedback helpful
Keep on coding! J
Marked as helpful
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