Skip to content
Submitted 9 months ago

QR-Code-Solution with HTML and CSS

Shawky Ahmed Shawky•60
@QS3H
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 was able to style the QR-code component with no problem

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

I had a hard time trying to center the wrapper and had some problems with getting the design pixel-perfect

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

I would love to know how to improve my code in general and am open to any advice to write better CSS code.

Community feedback

  • Dror Katzir•200
    @DorKatzirPosted 9 months ago

    nice work.

    center any div horizontal and vertical to the the screen size:

    remove this from the body (no need for that)

    min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;

    the wrapper div must have a width and a height same as the screen. after having width and height flex will center verticlal and horizontal:

     .wrapper {
     width:100%; 
     height:100dvh;
     display:flex; 
     align-items:center; 
     justify-content:center;
 }
    Marked as helpful
    1
    Shawky Ahmed Shawky•60
    @QS3HPosted 9 months ago

    @DorKatzir sure will do just that, thanks for the feedback

    0
  • zdnnnnn•40
    @zidannn24Posted 9 months ago

    Looks great!

    1

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