Skip to content
Submitted about 2 years ago

Responsive QR Code component

Kelvin Mvungi•140
@KelvinMvungi
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

Centering the Component was quiet difficult, I couldn't get it to be centered the veiwport automatically so I had to do it manually.

What are the best practices of centering items especially divs?

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @KelvinMvungi 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

    There are two modern CSS techniques to center elements:

    Using flexbox layout:

    body {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

    Using grid layout:

    body {
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

    And remove margin: auto; and margin-top: 100px; from the div selector.

    More information:

    Tips:

    With semantic tags:

    <body>
   <main>
      . . .
   </main>
<body>

    Good Job and happy coding !

    Marked as helpful
    2
    Kelvin Mvungi•140
    @KelvinMvungiPosted about 2 years ago

    @MelvinAguilar Thanks for the feedback. I also had a doubt in using semantic tags in small projects like this, but you cleared my doubt as it is the best practice.

    1
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi , congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!

    Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

    Your preview site its not displaying yet, first of all you need to configure the Github Page and update your solution inserting the new link.

    My suggestion for your is to use vercel or netlify since Github Pages its kinda tricky to configure. But if you really want to use Github Pages you can try to follow this guide to use it and fix the settings for your page https://docs.github.com/en/pages/quickstart.

    In case you choose netlify.com or vercel.com, in a matter of 5 minutes your preview site is online. All you need to do is to connect the Github account, import the repository and deploy it. Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Kelvin Mvungi•140
    @KelvinMvungiPosted about 2 years ago

    @correlucas Thank you so much Lucas. I went with vercel and let me say, for the first impressions it seems faster than Github pages. Please check the links again as I'm posting them right now, also please feel free to check my next challenge and say a thing or two of how you see it.

    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