Skip to content
Submitted over 1 year ago

QR code component using HTML and CSS

Ishita•180
@ishitaraina1807
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • visualdennis•8,375
    @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 helpful
    2
  • Michael•240
    @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 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
    Grace•31,250
    @grace-snowPosted over 1 year 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
    2
    Michael•240
    @mksoofianPosted over 1 year ago

    @grace-snow Thanks for the correction!

    0

Please log in to post a comment

Log in with GitHub

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