QR Code Card

Community feedback

• 

  matbac85•600

  @matbac85Posted 8 months ago

  Hey there! Just wanted to share a tip with you. If you're looking to center an element both vertically and horizontally, you can also use grids.

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

  You've done a great job with your component! However, I noticed that it's a bit taller compared to the model. I think there's too much white space below your text (body). You can try reducing your margin-bottom from 40px to 24px. That should do the trick! Let me know how it goes.

  1

  ---

  

  P

  Kamran Kiani•1,170

  @kaamiikPosted 8 months ago

  Thanks for your feedback @matbac85

  0

  

  matbac85•600

  @matbac85Posted 8 months ago

  Hey again ! @kaamiik

  I'm a beginner so I make mistakes.

  I suggested something "wrong" to center your component. but someone (Grace) told me this and I figured I should share with you: "I recommend using flex column for centering a component in the viewport and not grid with place content center. The reason is because with that grid approach if a user has a larger text size and views the component on a smaller screen content can overflow on the left as well as on the right, which you cannot scroll to reveal. With the flexbox approach overflow would only happen on the right meaning users could scroll to reveal that content."

  You can find her complete comment on my challenge. Have a good day !

  Marked as helpful

  0

  

  P

  Kamran Kiani•1,170

  @kaamiikPosted 8 months ago

  We are all beginners. Thank you for your very good feedback. I usually use both to practice. Initially, I was using flex and now I’m using grid and flex both. With this comment that you posted, I will use flex from now on. Also, I just read a new article, the link of which I will put down here so that we can take the footer to the bottom of the page. this was always a challenge for me :))

  Keep the Footer at the Bottom: Flexbox vs. Grid @matbac85

  1

  

  matbac85•600

  @matbac85Posted 8 months ago

  @kaamiik

  Yes, I'm doing the same thing (using both flex and grid). Thanks for sharing this article! I'm going to take a look at it right now. I look forward to seeing more of your projects.

  0

  

  P

  Kamran Kiani•1,170

  @kaamiikPosted 8 months ago

  Thanks It's my pleasure @matbac85

  0
• 

  Danielle•30

  @danilscodesPosted 8 months ago

  Hi Kamran, I'm just starting out with front-end, but you seem like you've got HTML & CSS down already! Your solution looks great! I don't really have any feedback for you, just a question: why did you use rem for font size instead of px?

  0

  ---

  

  P

  Kamran Kiani•1,170

  @kaamiikPosted 8 months ago

  Read this article from Grace Snow Why font-size must NEVER be in pixels @danilscodes

  1