Skip to content
Submitted about 1 year ago

QR-Code Card Using Flexbox

Alfrey-Chan•20
@Alfrey-Chan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

CSS Styling

  • I wanted to decrease the height of the card to make it more centered, would setting a max-height % for my card div be the correct approach?
  • I selected font weights 400 and 700 for the google font, how does it decide which elements will use those weights? (Seemed like my h1 and p tags automatically took the weights 700 and 400 respectively)
  • I originally wanted to wrap my h1 and p tag into a <div class="text">, would that be unnecessary?

Code Organization and Practices

  • Are there any bad practices that are worth mentioning?
  • Is there anything I can do to improve readability?

Community feedback

  • Freedteck•130
    @FreedteckPosted about 1 year ago

    Hello, I can't find fault in ur html code, where you probably need changes is in your css code. Below are the suggestions I have:

    1. Since u used the flexbox property on ur body tag, use the flex-direction: column;. This will make ur card at the center of the page.
    2. For the font weight, it's best to apply corresponding weight to individual element such as h1 {font-weight: 700;} and p {font-weight: 400;}
    3. The flexbox has a gap property which you can apply to the card-contents to give space btw the components inside. Such as gap: 20px;
    Marked as helpful
    1
    Alfrey-Chan•20
    @Alfrey-ChanPosted about 1 year ago

    @Freedteck Thank you, I will consider these in my future projects!

    0

Please log in to post a comment

Log in with GitHub

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