QR code component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Ammar0Yasser 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops.

  You can set the width to 320px or 20rem. It will help you avoid occupying too many media queries

  .card {
      . . .
      /* width: 20%; */
      max-width: 320px;
      margin: 0.938rem
  }
  
  .img-container {
       /*        This can be removed */
      /* border-radius: 8px; */
      /* width: 100%; */
      /* max-height: 13rem; */
      /* height: 16rem; */
      /* overflow: hidden; */
      /* display: flex; */
      /* justify-content: center; */
      /* align-items: center; */
  }
  
  .img-container img {
      width: 100%;
      object-fit: fill;
      border-radius: 8px;
  }
  
  @media (max-width: 375px){
   .card {
      /* width: 75%; */
   }
  }
  

  • Use margin: 0.938rem or margin: 15px in the .card selector so that it has some space when viewed on mobile devices.
  • Use min-height: 100vh to container selector, with this property you set a height and you let the element grow even more if necessary. Also, remove the margin: 9vh 1em; to center correctly.
  • Add an h1 tag to your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

  Solution:

  <h1>Improve your front-end skills by building projects</h1>
  

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  2