Skip to content
Submitted 4 months ago

cssreference.io

Hafsath2•10
@Hafsath2
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

The challenge motivated me to go even further in my research.

What challenges did you encounter, and how did you overcome them?

I encountered some difficulties, but with my research, I was able to resolve a few of them.

What specific areas of your project would you like help with?

I need help with the format; I'm having trouble getting the correct QR code format.

Code

Please log in to post a comment

Log in

Community feedback

  • Dusvy_M•520
    @dovelm

    Hello, how are you? I'd like to give you some recommendations.

    1. Don't use CSS inside HTML. It's good practice to use a separate file with all your styles, well organized, and only call them in the HTML with <link rel="stylesheet" href="style.css">
    2. Learn to use Flexbox for your layout. It's essential to master it these days so you can correctly position elements on the screen. I recommend this page, which helped me a lot: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    After you've mastered it with a few examples, you can play this game to reinforce your skills: https://flexboxfroggy.com/#es

    Then tell us how it went. Best regards, and keep going!

    Marked as helpful
  • Marzia Jalili•9,670
    @MarziaJalili

    Fantasticoo! 💯

    ✅ In order to move the attribution to the bottom of the card and avoid stretching consider the following:

    1️⃣ Make sure that the body element has only one child element by wrapping it with the main element:

    <body>
  <main>
    <!-- All the elements nested here... -->
  </main>
</body>

    2️⃣ Now, in css change add the following to the body selector:

    flex-direction: column;
align-items: center;

    And you have the job done, buddy.

    😎😎😎

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