Skip to content
Submitted 6 months ago

QR Code Component Using CSS FlexBox

Hamber•30
@HzHaxx
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 proud of practice my flexbox skills and the next time I'd like to use css grid.

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

I found it a little difficult how to layout the html but by trying different approaches I did it.

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

Maybe in future projects, but any feedback is highly appreciated.

Community feedback

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

    Hey ! Great work out there i just notice that you are using margin in main in order to center the qr code component but does not seem work , you are correct on applying display : flex on container but missing one properties to align that is min-height or height it is very crucial and important whether you want to align or in you case center something , by applying the height in container you can easily align the qr component easily. thats all happy coding !!

    .conteiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 375px;
  min-block-size: ;
  min-height: 100vh; // add this
  justify-content: center; // add this
}

    main {
  background-color: #fff;
  padding: 16px;
  margin: 70px 0; // remove this
  width: 320px;
  height: 492px;
  border-radius: 20px;
}
    Marked as helpful
    1
    Hamber•30
    @HzHaxxPosted 6 months ago

    @AkoToSiJeromeEh Thanks for your feedback it helps me a lot :)

    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