Product-preview-card-component

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Raahim,

  Congratulations for completing the challenge!

  It took 3 days just to figure out some things, that means you studied hard. Great job!

  Let me point out some things to improve the styling.

  • Remove height: 100vh; from <div class="box">. Let the box has automatic height based on its content.
  • Change <div class="con"></div> to <main></main> to remove one of the warning in accessibility report section.
  • Add padding to the body to give enough space around the content.
  • Remove border-radius: 15px; from both .imga and card. Add border-radius: 15px; and overflow: hidden; to <div class="op">.
  • Remove any height and max-height properties from <div class="card"> and its children elements in mobile view. Let it has automatic height based on its content.

  Please note that this comment is my personal approach. It could be right or wrong. Also, apart from those pointers, there's still a lot of room to improve. At least, I hope these could give you a new perspective.

  Happy coding!

  Marked as helpful

  0

  ---

  

  Raahim Wajid Ali•190

  @raahim21Posted almost 2 years ago

  @amalkarim Mr Karim, do you have a better way to make the website responsive?, anyways Thank you Mr.Karim that helps a lot.

  0

  

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  @raahim21 to make website responsive, generally you could use either display: flex; and/or display: grid; coupled with @media queries, just like what you've done in this project. If you want to see how I've done it, feel free to check them out. It's not the best solution though. There are quite a lot of accessibilities issue. But overall it works.

  Marked as helpful

  0

  

  Raahim Wajid Ali•190

  @raahim21Posted almost 2 years ago

  @amalkarim ok Mr.Karmin! Thank you for your helpful reply! But how do I make the content in a box adapt based on his parent container? and how should I center .op, when I remove 100vh from .box, the .op comes on top, what can I do to avoid it sir?

  0