qr-code-component-main solution using HTML and css

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 {
    background: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • If you use max-width, the card will be responsive and you can reduce the width a bit
  • You'd better update padding to give a gap between the content and the border of the card

  .container {
    padding: 16px;
    /* margin: 6% auto 38% auto; */
    max-width: 300px;
    /* width: 348px; */
    /* height: 545px; */
  }
  

  • 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

  img {
    width: 100%;
    /* width: 316px; */
    /* margin: 16px 0px 16px 16px; */
    border-radius: 8px;
  }
  

  • You'd better update the margin of the texts

  h2 {
    /* margin: 10px 36px 10px 36px; */
    margin: 20px 10px;
  } 
  

  p {
    /* margin: 10px 36px 10px 36px; */
    margin: 10px 0 30px;
  }
  

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

  Hope I am helpful. :)

  10

  Marked as helpful
• 

  Angela Moore•170

  @Cyber-Chic

  Posted about 2 years ago

  Your solution looks awesome! Wonderful job completing your first challenge! 😊

  I have a few small recommendations that may improve your site:

  • Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page. To fix this, you could change your <h2> element to an <h1> element.

  • Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag alt="QR code to frontendmentor.io".

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  00

  Marked as helpful
• 

  Rudy Alexander Perez De La Cruz•20

  @rudyalexanderperezdelacruz

  Posted about 2 years ago

  check the padding missing on top of the img

  00