Skip to content
Submitted 6 months ago

https://github.com/Ugwoke-Nmasinachi/Task1---QR-code.git

Ugwoke Nmasinachi•20
@Ugwoke-Nmasinachi
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 am really happy that i was able to finish in less than 24 hrs. I think i should plan better before i start a project.

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

Positioning was kinda hard at first but i just used box model to handle it. Also, anytime i work on a project that involves a picture, i always have issues with the width of the picture but yh, i was able to overome this one sha

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

I still need help with positioning and dealing with size of images

Community feedback

  • Ugwoke Nmasinachi•20
    @Ugwoke-NmasinachiPosted 6 months ago

    Oh thank you, i'll work on that. Thanks for the feedback🙏

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

    Hey ! Great work out there i just notice that you are using margin and calculating the value of it in order to align the qr code component in the center of the screen but when i try to zoom-out it does not seem align on center , i suggest that you can use display properties such as grid or flex that is very useful and easier to use in this kind of situation by adding that on body you can vertically and horizontally align the qr code component . that's all happy coding !!

    body {
  background-color: hsl(212, 45%, 89%);
  display: grid; // add this
  place-content: center; // add this
  min-height: 100vh; // add this for proper alignment it is very important and crucial when you are centering something
}

    .wrapper {
  border: 1px solid transparent;
  width: 270px;
  margin: 100px auto 0 auto; // remove this
  border-radius: 15px;
  background-color: white;
  text-align: center;
}
    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