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 & CSS

Davidโ€ข 250

@AA-David

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Are there any better practices I could do?

Any kind of feedback or constructive criticism is welcome :)

Community feedback

@abbaskhan349

Posted

bro reduce the size as you can see also focus on it, you may find issues

1
Lucas ๐Ÿ‘พโ€ข 104,400

@correlucas

Posted

๐Ÿ‘พHello David, congratulations for your solution!

I've inspected your code to understand why the container was so big and I did some fixes for you.

1.Use the property box-sizing: border-box; inside the body to work better the padding and don't lose time calculating the container size + padding.

1.The card container was so big due the height: 850px. I've removed to some unnecessary properties and you can see the code below:

.container {
    max-width: 350px;
    /* border: 1px white solid; */
    background: white;
    /* margin: 40px auto auto auto; */
    /* height: 850px; */
    border-radius: 16px;
}

Here's some fixes also with the qr code image, to deal better with the image, use display: block; and max-width: 100%; this way the image will have the container size.

img {
    display: block;
    /* margin: 15px auto 40px auto; */
    max-width: 100%;
    border-radius: 12px;
    /* padding: 16px; */
}

Hope it helps and keep it up!

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