QR Code with CSS Grid and Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Freddy Santana, congratulations for your solution!

  I saw your live site right now and its almost finished, there's only some small details you can fix in order do improve it.

  1.The background is not full width because you've add it to the container not that there's a difference between the card size and the screen size, the width 1440px given for the challenge is just to say in which resolution the challenge was created, you don't need to set a max-width for the body and for the component the max-width is 350px thats its size:

  To fix the background not filling the full screen just remove the max-width: 1440px;:

  .container {
      /* max-width: 1440px; */
  }
  

  2.To allow the component card to be responsive you've to replace width with max-width the difference between this two properties and that width is fixed and max-width is flexible.

  Hope it helps Freddy, and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Freddy Santana•190

  @CreixzPosted over 2 years ago

  @correlucas Thanks my friend, I'll try to implement what you recomment me in this and the others projects that I'm going to do. Thanks for your time.

  0
• 

  raionus•310

  @sinjin25Posted over 2 years ago

  The BEM seems correct.

  I'd recommend putting padding on the card rather than on each element inside the card. This will let you standardize the padding instead of having to set in everywhere. The method you did makes it hard to make changes.

  You can get away with just having this on the image:

  max-width: 100%
  border-radius: (whatever)
  

  That lets you get away from using a magic number for width.

  grid-template-rows with percents seems like a bit of a fragile solution. I'd recommend splitting it like: card -> card-head + card-body and then maybe using fr to divide up the space between the head and body.

  Marked as helpful

  1

  ---

  

  P

  Freddy Santana•190

  @CreixzPosted over 2 years ago

  @sinjin25 Thank you my friend, your feedback really helped me a lot. You are right its better to use fr in grid and split using card>card__head and card__body.

  1