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.

  • 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. :)

  0
• 

  Sonsawan Ngamsom•140

  @murphy6867Posted over 1 year 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. :)

  0

  ---

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @murphy6867 I hope this message finds you well. I wanted to kindly request that you refrain from copying my comment. I would encourage you to express your own thoughts and opinions by making your own comment. It's important to maintain originality and respect for each individual's unique perspective.

  1

  

  Sonsawan Ngamsom•140

  @murphy6867Posted over 1 year ago

  I understand But I want to say that my intent is just to suggest others who have made the same mistake as me. Where the instructions must be correct. I will improve myself using the advice I have refined from myself. Thank you. @ecemgo

  1