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

Ishita 180

@ishitaraina1807

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

P
visualdennis 8,255

@visualdenniss

Posted

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

2
Michael 240

@mksoofian

Posted

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

1

P
Grace 28,110

@grace-snow

Posted

@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

2
Michael 240

@mksoofian

Posted

@grace-snow Thanks for the correction!

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