Skip to content
Submitted 10 months ago

QR code using absolute positioning and vanilla CSS

hopefulobject•80
@hopefulobject
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am most proud of how close to the design the final product turned out. I would maybe try to find a better way to align the container to the center of the page next time.

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

Aligning the container vertically center on the webpage. I overcame this by using absolute positioning and setting right: 0 left: 0 top: 0 bottom 0

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

What are the best practices for aligning a div to the center of a webpage?

Code

Please log in to post a comment

Log in

Community feedback

  • Jorge•80
    @Broderpixelv1

    Hello, consider using flexbox for this exercise, it will allow you to center both vertically and horizontally in an easier way; In addition, it will allow you to make responsive designs.

    display: flex; justify-content: center ; align-items: center;

    These properties inside container will be useful, omitting postion, top, bottom, left, rigth.

    It would be advisable for the width and height of the main to be 100% of the screen size, so it would adapt to the different screens where your site is displayed.

    Greetings

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