Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@Ugwoke-Nmasinachi

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Posted

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

0

@AkoToSiJeromeEh

Posted

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
Discord logo

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