Responsive Product preview card

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Sushant, Congratulations on completing this challenge... Here are some suggestions:

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

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

  • An img element must have an alt attribute, to provide alternative information for an image if a user for some reason cannot view it.

  • All page content should be contained by landmarks, Contain the attribution with <footer>.

  <footer>
     <div class="attribution">
        //...
     </div>
  </footer>
  

  • Use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed... See this article ---> CSS REM – What is REM in CSS?

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

  body {
      background-color: hsl(30, 38%, 92%);
      /* margin: 150px;         /* <---- Remove  */
      //...
  }
  main {       /* <--- Add */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
   }
  
  .grid {
      background-color: #fff;
      /* margin: 0 auto;         /* <---- Remove  */
      //...
  }
  

  Hope this help!... Keep coding👍

  Marked as helpful

  1

  ---

  

  Sushant nande•30

  @sushant2313Posted over 2 years ago

  @Bayoumi-dev thank you so much. I'll try and do my best .

  0