QR code component

Community feedback

• 

  Victoria Azola Silva•1,290

  @VickyAzolaPosted about 1 year ago

  Hi! Great work finishing this challenge! For your first question, there is an easier way! When there is something you want to center vertically and horizontally, you can use a display grid or flex.

  • With Grid:

  body { 
      min-height: 100vh;  //sets the minimum height of the body to be 100% of the screen.
      display: grid;
      place-content: center;  //align content vertically and horizontally.
  }
  

  • With Flex

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

  • For the second question, in this case, it is sufficient since the design is the same for mobile and desktop. When you need to make different designs in the future use the @media queries of CSS, here is a link for more info on that

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Ibrahim Suleiman•50

  @ebeeraheemPosted about 1 year ago

  @VickyAzola

  Thank you so much for taking the time to respond to my questions. I had no idea about the place-content property at all! It's really kind of you to introduce me to it.

  The @media queries are a bit further in my studies but I think it's high time I learn about them anyways. Thank you once again, this was very helpful.

  1