(Desktop) Qr Code Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • Small Tip: The space between the component border and the image can be created using simply padding, it is also not strictly necessary to use flexbox inside the component, as you have not used any properties such as gap or any other.

    .card-container {
        max-width: 360px;
        background-color: var(--white);
        border-radius: 1rem;
    
        /* NOTE 1: For example, this display flex is not strictly necessary, add padding on all sides so that the elements never touch the edge. */
        padding: 20px;
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: center; */
        /* justify-content: center; */
        box-shadow: 0px 15px 50px 3px rgb(0 0 0 / 29%);
    }
    
    .card-image {
        /* NOTE: In note-1 you have this padding but generalized.*/
        /* padding-top: 20px; */
        padding-bottom: 20px;
    }
    
    .card-content {
        /* NOTE: If for some reason you need to set a width to this div, you can use 'margin-inline' to center it horizontally, 'margin-inline' is a shorthand for 'margin-left' and 'margin-right'.*/
        width: 89%;
        margin-inline: auto;
    
        /* NOTE: This is not strictly necessary.*/
        /* display: flex; */
        /* flex-direction: column; */
        /* align-items: center; */
        /* justify-content: center; */
        margin-bottom: 30px;
    }
    

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1