QR code component challenge on Frontend Mento

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgo

  Posted about 2 years ago

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

  HTML

  • You'd better update the <main> structure in the html to prevent the deterioration

  <main>
        <img src="./images/image-qr-code.png" alt="QR code image">
        <h1> Improve your front-end skills by building projects </h1>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
      </main>
  

  CSS

  • 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;
  }
  

  • When you use flexbox in the body, you don't need to use flexbox and margin in the main to center the card
  • If you use max-width, the card will be responsive and you can reduce the width a bit

  main{
     /* width: 350px; */
     max-width: 300px;
     /* margin: 200px auto 20px auto; */
  }
  

  • 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{
    border-radius: 8px;
     width: 100%;
  }
  

  • You'd better update texts in this way

  h1{
     /* font-size: 28px; */
     font-size: 20px;
     font-weight: bold;
     color: var(--dark-blue);
  }
  

  p{
     /* font-size: 20px; */
     font-size: 16px;
     color: var(--grayish-blue);
  }
  

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

  Hope I am helpful. :)

  00

  Marked as helpful