QR-code-component

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  In order to fix the accessibility issues:

  • You need to wrap <div> with the <main> tag in this way:

  <main>
    <div>
         ...
    </div>
  <main>
  

  CSS

  • If you want to center it easily and give the recommended color to the background, you can update the body in this way:

  body {
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  

  • if you use flexbox in body, you don't need to give margin to div. This div is the updated version:

  div {
    background-color: white;
    border: 2px solid whitesmoke;
    border-radius:20px ;
    max-width: 320px;
    padding: 1.075rem;
  }
  

  Hope I am helpful. :)

  0

  ---

  

  Raghda19•100

  @Raghda19Posted over 1 year ago

  Thanks for giving so much effort and time to come along with this clarification that I keep stuck on it and trying to get my head around it, your explanation is very helpful that I can't thank you enough. I really appreciate ,thanks allot.
  @ecemgo

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @Raghda19 I'm happy to help :)

  0
• 

  George Bleyer•280

  @georgebleyerPosted over 1 year ago

  Hello,

  Congratulations on completing this challenge. Here are some tips on how to align your card. In your .body put this code:

  display:grid;
  place-items:center;
  min-height: 100vh;
  

  You can use Flex Grid to align the card to.

  I hope it helped.

  0

  ---

  

  Raghda19•100

  @Raghda19Posted over 1 year ago

  I really appreciate your help ,thank you so much @georgebleyer

  0