QR code challenge using HTML and CSS flexbox attempt

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Good job! Card itself looks good.

  If you want to position the card to center of the page, you could make the parent a flexbox container: e.g.

  .container: { display: flex; align-items: center; justify-content: center; ...rest of the code}

  (alternatively, display: grid; place-items: center; would work too if u want it one-line shorter:)

  My other suggestion would be to not to give a fixed width and height to the container like 1440px and 2560px as it might prevent you position it the way you want on every device size. Instead you can add: width: 100%, min-height or height: 100vh; so it looks centered no matter how you resize the browser. Additionally you can add margin:0 to body element or to * { margin: 0} to get rid of the extra space. Hope this helps! Good luck on next challenges

  Marked as helpful

  1
• 

  João Vitor•460

  @jvssvjPosted over 1 year ago

  Hello, I'll give you some tips, put all your content in <main class=container>. To centralize

  .container { height:100vh display:grid place-items:center }

  In your ".card" delete the settings of "display:flex". In your ".container" delete the "width: 1440px; height: 2560px;".

  Marked as helpful

  1