Responsive using flex and width percentage

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 years ago

  Hi Patrick, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • to make it look as close to the design as possible set width: 22rem to card class
  • remove all margin from card class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • add transition on the element with hover effect
  • instead of using px or % use relative units of measurement like rem -> read here

  Overall you did well 😁 Hope this help!

  01

  Marked as helpful
• 

  MOHAMAD NAZIR MD NAZRI•180

  @NAZIRwill29

  Posted over 3 years ago

  @patrickbasamot

  That was really great.

  div card should be wrapped in <main>. It is best practice to wrap content in <main>.

  For hover to show icon-view.svg, you can make <div> wrap icon-view.svg and background color cyan to the <div>. Make it hover manipulate z-index rather than opacity.

  01

  Marked as helpful