Frontend Mentor | QR code component using HTML and CSS coding challenge solution

Community feedback

@visualdenniss

Posted 11 months 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 helpful

Michael• 240

@mksoofian

Posted 11 months 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 also height: 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 a max-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 helpful

Grace• 27,870

@grace-snow

Posted 11 months ago

@mksoofian I think you mean min-height: 100vh not height. It's important not to limit height but let it grow as and when it needs to

Marked as helpful

Michael• 240

@mksoofian

Posted 11 months ago

@grace-snow Thanks for the correction!

QR code component using HTML and CSS

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community