Skip to content
Submitted about 2 years ago

QR Code Component

web-components
Brian Nelson•150
@briannelson95
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was a pretty easy challenge for me. I decided to keep it simple and utilize just html and css files.

Code

Please log in to post a comment

Log in

Community feedback

  • Hassia Issah•50,410
    @Hassiai

    For a responsive content,

    • Give .card a fixed max-width value and a padding value for all the sides max-width: 320px which is 20rem/em padding:16px which is 1rem/em
    • Give the img a max-width of 100% and a border-radius value, the rest are not needed.

    There is no need to give the body a height value.

    To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.

    Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

  • Sounak Mukherjee•560
    @kanuos

    Congrats on your first submission. It looks great :)

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