QR code component

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

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

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • You don't need to use div.container, .container is appropriate to use
  • When you use flexbox in the body, you don't need to use margin in the .container to center the card
  • If you use max-width, the card will be responsive
  • You'd better add padding to give a gap between the content and the border of the card

  .container {
    /* width: 300px; */
    /* height: 500px; */
    /* margin: 50px auto; */
    max-width: 300px;
    padding: 15px;
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

  .qrimg img {
    border-radius: 15px;
    /* margin-top: 20px; */
    width: 100%;
  }
  

  • You don't need to define .qrimg for this solution so you can remove it

  /* .qrimg {
    display: flex;
    justify-content: center;
  } */
  

  • Finally, if you follow the steps above, the solution will be responsive.

  Hope I am helpful. :)

  00
• 

  Sonsawan Ngamsom•140

  @murphy6867

  Posted about 2 years ago

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

  In order to fix the accessibility issues:

  You need to replace <div class="container"> with the <main class="container"> tag and <div class="attribution"> with <footer class="attribution">. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly. Each main content needs to include at least h1 element so you should use one <h1> element in the <main> tag. You can replace your <h3> Improve your front-end skills by building projects</h3> element with the <h1>Improve your front-end skills by building projects</h1> element. Finally, you should click generate a new report on this solution page to clear the warnings.

  Hope I am helpful. :)

  02