QR code component using HTML and CSS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Shefali,

  My suggestions:

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="container">
        //...
     </div>
  </main>
  

  • I suggest you center the component on the page with Flexbox, by giving the parent element container the following properties:

  and There are some changes to git your project look as close to the design as possible.

  *{
    box-sizing: border-box;    /* <---- Changed */
    /* overflow: hidden;     <---Remove */
  }
  
  .container {
     display: flex;    /* <---- Add */
     justify-content: center;    /* <---- Add */
     align-items: center;
     min-height: 100vh;    /* <---- Add */
    /* margin-left: 42%;    <---Remove */
    /* margin-top: 13%;     <---Remove */
   }  
  @media only screen and (max-width: 1000px){
    .container{
      /* margin-left: 30%;     <---Remove */
    }
  }
  
  .card{
    align-items: center;
    border-radius: 5%;
    width: 300px;
    height: 500px;
    background-color: hsl(0, 0%, 100%);
    
    padding: 16px;    /* <---- Add */
  }
  
  h1 {
    font-size: 23px;    /* <---- Changed */
    text-align: center;
  /*   margin-left: 50px;     <---Remove */
  /*   margin-right: 50px;     <---Remove */
  /*   margin-top: 30px;     <---Remove */
      color: hsl(218, 44%, 22%);
      font-weight: 700;
  }
  
  p {
    font-size: 15px;
    text-align: center;
  /*   margin-left: 50px;     <---Remove */
  /*   margin-right: 50px;     <---Remove */
    margin-top: 12px;    /* <---- Changed */
    padding: 0 12px;    /* <---- Add */
    color: hsl(220, 15%, 55%);
    font-weight: 400;
  }
  img{
    width: 100%;    /* <---- Changed */
    height: 288px;    /* <---- Changed */
    border-radius: 10px;    /* <---- Add */
  /*   padding-left: 10%;     <---Remove */
  /*   padding-top: 10%;     <---Remove */
  }
  
  footer{
  /*   margin-top: 150px;     <---Remove */
  }
  

  Hope this is helpful to you... Keep coding👍

  Marked as helpful

  0

  ---

  

  Shefali•250

  @WebdevShefaliPosted over 2 years ago

  @Bayoumi-dev Thank you so much for your suggestion. It helped me a lot to improve my code.

  0