QR Code Component using basic HTML and CSS

Community feedback

• 

  Koli•110

  @KoliOyamaPosted over 1 year ago

  Yes, you were right to use flexbox. Just to clarify;

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

  Using justify-content: center, the container will be set at the horizontal center. While align-items: center will set it at the vertical center.

  With grid:

  body {
         display: grid;
         Place-items: center;
         min-height: 100vh;
               }
  

  As for managing the widths, try making use of the max-width property for the containers. This will restrict it from stretching with your browser window. I hope this helps ;⁠)

  0
• 

  d8701a•240

  @d8701aPosted over 1 year ago

  Hi!

  Using flexbox to center elements or for layouts in general is a good idea. So you made a good call when you decided to use it in this case. There are other ways of horizontally centering elements, such as using margins: (margin: 0 auto), using transform: translate(-50%, -50%) but this also requires an element to be absolutely positioned so I'd avoid this one, using grid and of course - using flexbox. For a simple layout like this, flexbox seems like a perfect use case.

  When it comes to managing the card size, I believe the priority should be its responsiveness. It should be able to change it's dimensions depending on the screen size. For this, try learning more about setting width with one of these three things: min(), max() and clamp() function. For more information on these, check this article: https://web.dev/min-max-clamp/

  0