Responsive using flex and width percentage

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 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!

  Marked as helpful

  0

  ---

  

  Patrick Basamot•50

  @patrickbasamotPosted over 2 years ago

  @denielden Thank you very much sir for the feedback and a guide to help me improve this output.

  1
• 

  MOHAMAD NAZIR MD NAZRI•180

  @NAZIRwill29Posted over 2 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.

  Marked as helpful

  0

  ---

  

  Patrick Basamot•50

  @patrickbasamotPosted over 2 years ago

  @NAZIRwill29 Will try thank you very much.

  0