Responsive product card using flexbox, rem units, and a media query

Community feedback

• 

  Ridwanullah•210

  @DanonymousCoderPosted over 1 year ago

  Nice work bro, keep grinding. Your work is awesome you still need to do some little adjustment. Firstly, the element 'Perfume' isn't given the right color and also you need to add a letter spacing to it. Secondly, your slashed price is not in the right position. It should be at the upper part of the actual price. Thirdly the responsiveness is not looking really good, you should the image to the image given for the mobile view. And also, adjust the height of the container and make it automatically appear at the center of the screen.

  Marked as helpful

  2

  ---

  

  Benjamin Lincoln•20

  @CuriousFullStacksPosted over 1 year ago

  @DanonymousCoder thank you for the feedback on this, I hadn't noticed the color at all until you pointed that out. As for the responsiveness I just pushed new code that should have fixed most of the issues!

  0
• 

  Omar•240

  @omar-csdevPosted over 1 year ago

  Hi, it looks good on large screens but not so much on smaller devices. I advice you to check that out and make it responsive using @media queries. Also on smaller devices the image should change to the mobile image provided in the files. You can achieve this using the <picture> tag, look that up it's not difficult. Good luck!

  Marked as helpful

  1

  ---

  

  Benjamin Lincoln•20

  @CuriousFullStacksPosted over 1 year ago

  @iHesh84 Thank you for the feedback, mobile should be fixed now with the proper image used!

  0

  

  hameedmodibbo•110

  @hameedmodibboPosted over 1 year ago

  @iHesh84 please how can i switch from the desktop to mobile image using the <picture> tag

  0

  

  Omar•240

  @omar-csdevPosted over 1 year ago

  @hameedmodibbo This was my solution: <picture> <source srcset="/images/image-product-mobile.jpg" media="(max-width: 600px)" /> <img class="parfum-bottle" src="/images/image-product-desktop.jpg" alt="Gabrielle Chanel Paris Parfum Bottle" /> </picture> As you can see the media property controls when the image swaps and the srcset controls to which image it swaps to! Try out and tell me.

  1