QR Code basic solution

Community feedback

• 

  mark_pherz•450

  @mark-pherzPosted over 1 year ago

  Hi Yoshi! Congratulations with your first challenge.

  Try to replace your body and .main with this:

  body {
  background-color: hsl(219, 39%, 84%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; 
  }
  
  .main {
  border-radius: var(--BORDER-RADIUS);
  max-width: 355px;
  background-color: hsl(0, 0%, 100%);
  }
  

  I suggest you to dive into flex and grid in CSS. These are the most powerful positioning and layout tools in CSS.

  I also suggest you visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

  Hope it can help you, reach me out if you have more questions. Good luck!

  Marked as helpful

  0

  ---

  

  yoshi718•160

  @yoshi718Posted over 1 year ago

  Thanks Mark, as a matter of fact I did just find that out for my second challenge.

  0
• 

  Romedix1•820

  @Romedix1Posted over 1 year ago

  If u want to center a div horizontally u can use few methods:

  • margin: auto;
  • justify-content: center; (flex)
  • text-align: center;

  ,But if u want to center it vertically u can use:

  • align-items: center; (flex)

  0

  ---

  

  yoshi718•160

  @yoshi718Posted over 1 year ago

  Thanks, I'll try that.

  0