Skip to content
Submitted 10 months ago

QR Code Card using Flexbox

Artemis•20
@outerspaceartie
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

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

I'm proud that I was able to complete this challenge in general, and that I was able to learn the :root pseudo-class element.

Next time, I want to try using a mobile first approach. Though this project did not require media queries, responsive websites are a bit of a struggle for me.

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

My biggest challenge was centering the "card". I've struggled a lot in the past with getting something to be fully center, so it took a lot of work to get it to finally work. I used an article by freecodecamp.org which gave me a number of ways to solve the problem.

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

I would like help with cleaning up my code. Being fairly new to programming, I don't know all of the best practices when it comes to organizing my code.

Community feedback

  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEhPosted 10 months ago

    Hey ! Great work out there i just notice that you are using margin to vertically align the qr code component on the center , since you are using flex you can remove the margin in the .container and add height to properly align the qr code component vertically . that's why justify-content don't work since there has no height in the container. that's all happy coding !!

    .container {
  font-family: "Outfit";
  font-size: 15px;
  text-align: center;
  margin: 100px auto; // remove this
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; // add this
}
    Marked as helpful
    1
    Artemis•20
    @outerspaceartiePosted 10 months ago

    @AkoToSiJeromeEh Hi! Thank you so much for this! I was wondering why the component seemed so off-center in comparison to the original, but now I know why and how to fix in the future. I really appreciate 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