Challenge n°1: QR-Code by Markito

Community feedback

• 

  Kyureus•160

  @Kyureus1Posted over 1 year ago

  your code is well done, but i find it too big to be only one object in the center of the page, you can ratherly lower its height and use flexbox to keep its content centered:

  /*this will center all the content in your page, now you can give 
  individual properties to them*/
  *{
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  /*now you can modify the inner content of the box:*/
  .attribution {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  display: flex;
  background-color: hsl(0, 0%, 100%);
  flex-direction: row;
  }
  * {
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  /*modify the size of the image*/
  img {
  width: 300px;
  border-radius: 25px;
  }
  /*now you can make changes to the main div*/
  .qr-code {
  background-color: hsl(0, 0%, 100%);
  padding: 2%;
  border-radius: 25px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*keep on mind all of the flex code is just to make sure 
  everything remains centered when you resize or make 
  changes on margin, padding, or even the size of the objects*/
  }
  /*now your qr box is placed in the center of your page and there's no scroll
  bar needed, remember that if you want to make it even smaller, all you have
  to do is reducing the margins of the <p> objects and adjusting their font
  size, i still think it's too big for the case, but as you like it, it's 
  fine too.*/
  

  Marked as helpful

  1
• 

  Kelf Almeida•230

  @Kelf1729Posted over 1 year ago

  Hi, i can't see your code, link doesn't work but you need put in your code: body{ min-height: 100vh; display: flex; justify-content: center; aligh-items: center; } So your qrcode card will be centralized, good work and keep going.

  Marked as helpful

  1