Design comparison
Community feedback
- @visualdennissPosted over 1 year ago
Hello Mermaido,
Good effort! I've couple of suggestions to improve further:
first, u need to change your html structure, not the body but a <main> should be the container for these elements and do not give any fixed height, only a max-width is enough. You can make the image width:100%, which will grow as much as it can until it hits containers max-width. You can then add a padding so there is little white space between image and the containers borders.
To center the QR card inside the body, u can use display: grid; place-items: center; min-height: 100vh;
I also recommend you to check my solution for the QR code for further ideas: SOLUTION LINK
Hope you find this feedback helpful!:)
Marked as helpful2 - @mksoofianPosted over 1 year ago
Hi @ishitaraina1807!
Congrats on getting started here. Here are some of my suggestions that I hope you find helpful:
-
Delete everything in the <body> of your HTML except the <div class="body">. All that content is not needed for your project.
-
Take a look at your file now, it should look a lot better and more simplified! =]
-
A more appropriate way to center your card on the page would be to add the follow CSS to your <body> tag
display: flex; justify-content: center; align-items: center
and alsoheight: 100vh
(this will adjust your body element height to match that of your browser window) -
Remove all the
margin
selectors as well as your width selector. Instead apply amax-width: 17em
and your height will auto adjust as needed.
It might not perfectly match the original design but you can tweak if needed. I hope this process of adjusting your code was helpful. If so please upvote my comment :)
Good luck on your journey!
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin 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