product preview card using flexbox

Community feedback

• Account deleted

  Hello @Sale1982 😊

  Your solution is great✨ and congratulations for successfully completing a newbie challenge🎉

  and there is a small suggestion that might be helpful for you

  • min-height :

  You can use min-height instead of height

  because height will put your element to a size of 100% of it's container. min-height will put the element to min 100% of the container size.

  if we set min-height: 100vh then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space

  and it will helpful when you make responsive solutions

  • <main> landmark :

  The main role is a navigational landmark role identifying the main content of a document. Landmarks can be used by assistive technology such as screen readers to quickly identify and navigate to large sections of the document.

  you can use <main> to wrap your page all content like :

  <main>
  ''' your page content '''
  </main>
  

  For more info check this link

  Hope that was helpful 😊

  Marked as helpful

  0