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

HTML & CSS - No Pre-processor ( Updated thanks to@adimidania)

Yokke 640

@Jexinte

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


Update of the solution thanks to @adimidania

Community feedback

dania 530

@adimidania

Posted

The card is looking great! good job Yokke you rock 🤩 However, the card needs to be centered, there are many ways to achieve that, one of them is to use flexbox! try to add the following properties to your body element.

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;

Keep it up mate!

Marked as helpful

1

Yokke 640

@Jexinte

Posted

@adimidania Thanks for the advice :) , I thought just put margin : 1 em auto will be enough to center it but your flexbox solution is very useful !

1
dania 530

@adimidania

Posted

@Jexinte Indeed! good luck Yokke and happy coding :D

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