Product preview card component using Grids and Flexbox

Community feedback

• 

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  Hi Ravindra, great job! You've done well to match the design and it has good accessibility. My only issue with the implementation is the responsiveness when changing to mobile. On smaller mobile screen sizes the design remains large and text falls off the card, but I understand you aimed to compensate for the maximum screen width (from the comment above the @media). My solution to this would be to change the font sizing greatly in the @media.

  Also, the implementation only uses the perfume desktop image, rather than changing to the mobile image for smaller screens. This is okay as it still looks good, but it can be achieved by using unique ids or classes with "display: hidden; ", and altering the style in the @media.

  Keep up the good work!

  Marked as helpful

  1

  ---

  

  Ravindra Reddy•180

  @ravindra135Posted over 2 years ago

  @JacobMarshall0 Hey Jacob, thanks a lot for giving your valuable time on writing feedback on the code. As you remind me I also need to change the image for mobile. I also checked as you mentioned in smaller screen size, the card component is way too bigger, and in mobile view, the text is getting out of the card.

  I would be glad if you could share with me some of the solutions, or repo, to get better insights.

  Thank You.

  1

  

  Jacob Marshall•270

  @JacobMarshall0Posted over 2 years ago

  @ravindra135 Here is a link to my implementation.

  As you can see the images are included in the same div, and have different IDs, allowing for one to be set to "display: none;" and for the other to be shown when the size becomes small enough.

  To change the size of your text, you could use css variables, which could then be reassigned a new smaller value in the @media. This might be a useful resource: https://www.w3schools.com/css/css3_variables.asp

  0