Skip to content
Submitted almost 2 years ago

QR code component using HTML and CSS

Ishita•180
@ishitaraina1807
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    visualdennis•8,395
    @visualdenniss

    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

    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

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