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

Qr-code

@ServalFake

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


I'm not quite sure if using position relative and eyeballing it is the best way to center it, if anyone uses something more reliable please let me know

Community feedback

@pantherdox

Posted

if you are a newbie developer, then this project is well enough crafted by you and you deserve appreciation for the effort you put on this project. As i can see you are still not good with position properties, try to practice flexbox and grid. To center this use: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; }

or

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

Marked as helpful

1

@ServalFake

Posted

@pantherdox I appreciate the feedback! Flexbox is something I'm trying to use more and more and it seems to have worked well on my current project. I've never used gridbox, but I'll make sure to incorporate it on my next project.

0
Soraya 230

@Sorpanda

Posted

If you use:

min-height: 100vh; display: grid; place-content: center;

on the body then it will center it.

Good job!

Marked as helpful

0

@ServalFake

Posted

@Sorpanda I didn't know that, thankyou!

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