QR code component

Community feedback

• 

  David Dutra•230

  @dvdgdPosted 7 months ago

  Hello there! Great job completing this challenge.

  In all frontend mentor challenges, the starter folder will always include a file named style-guide.md, which contains information about typography, such as font weight, as well as the color palette used in the design.

  With that in mind, I have a few suggestions for improving the UI to closely match the design:

  • Update the body background-color to use hsl(212, 45%, 89%).

  • Set the text color of the "Scan QR Code..." section to hsl(220, 15%, 55%).

  • The h3 doesn't need a color; you can simply use font-weight: 700;. Here's the suggested typography:

    .card-box .content h3{
        font-weight: 700;
        font-size: 22px;
        line-height: 28px;
    }
    

  • As long as you match the typography, it's also important to match the size of the card. For the maximum width, ensure the card doesn't exceed 320px (including padding). Calculating: 320px - 16px padding right - 16px padding left = 288px of maximum width. And for the card to react to a small screen, prevent it to get the full width of the screen by adding a margin: 0 16px

    .card-box {
        max-width: 288px;
        padding: 16px;
        padding-bottom: 40px;
        border-radius: 20px;
        margin: 0 16px;
    }
    

  • For the image, remove both width and height percentage values. Setting a maximum width of 100% will ensure the image adjusts to the size of the .card-box, which has a maximum width of 288px. The height property will be automatically calculated.

    .card-box img {
        max-width: 100%; 
        border-radius: 10px;
    }
    

  • The last thing that will be missing is the card box shadow:

    .card-box {
      box-shadow: 0px 25px 25px rgba(0, 0, 0, 4.77%);
    }
    

  You've done a great job centering the content using margin: 80px auto. To further improve it, consider using a dynamic value in the margin: margin: 15% auto. But also try another approachs like using flex-box properties.

  Additionally, you've effectively utilized media queries and CSS variables to set the card width based on the screen. While these are valuable for responsiveness, given that we have dynamic values for our image, the content can naturally adjust in mobile devices without the need for additional media queries.

  Marked as helpful

  0

  ---

  

  Gideon Akpan•150

  @gideonakpanPosted 7 months ago

  @dvdgd thank you

  0
• 

  florinbejgu•40

  @florinbejguPosted 7 months ago

  The solution diverges from the design in the fact that it is responsive and at certain sizes it looks strange (at 1020px width is wider than at 1030px). The heading colour is also different.

  0