My First Frontend Mentor Challenge for QR Code Component Challenge.

Community feedback

• 

  Jeuri Morel•1,385

  @JeuriMorelPosted about 1 year ago

  The <center> tag is no longer supported by HTML. It was used to center text, not to hold content. Try changing it to something like <main> for example. If you want to then center the content, give your main the following:

      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
  

  and give your body a height of 100vh so that it takes the full height of the screen.

  Remove the following from the card:

      max-width: 17%;
      margin-top: 160px;
  

  Be careful when setting max-width especially when it's to a small percentage like "17%". It can lead to content that is too narrow. Try to use more controlled values. I usually use clamp when I want to have fluid sizes with min and max values. An exampled would be width: clamp(300px, 25vw, 375px);

  Remove the hardcoded width on the img and give it a width of 100% to make it fluid and consistent when the card changes sizes. Then give it display: block;. It makes working with images easier and removes a little bit of extra white space under it.

  Marked as helpful

  2

  ---

  

  Victor Kweka•10

  @victorjudysenPosted about 1 year ago

  Thank you @JeuriMorel, I will work on it.

  0