Responsive Product-Preview-Card-Component using CSS Grid

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Ting, well done on completing your second challenge! Your solution on desktop view looks great, and I'm glad you managed to fix the links to get it working.

  A few things to note: When I'm resizing the browser, at around the 400px breakpoint, the card becomes distorted and squished until around 1200px. I think it's because you've set widths using viewport widths in a grid. A padding of 29vw would look OK for a screen at 1400px, but at 520px, the padding takes up around 1/3 of the space, leaving very little for the card. I don't recommend using grid this way because you're limiting what your browser can do in resizing things for you.

  What I suggest is to use min-width and max-width instead, and always try to avoid having huge paddings and margins. For instance, for the mobile view, set a max-width of around 450px or 500px, and then set a larger one at a later media query. Also, instead of a padding with viewport widths, try centering your entire component (which you can do by adding display:grid, place-content:center and min-height:100vh on your body), and then add a 1rem padding on your .container. When things are centered, there's already space around the component, which acts as a kind of natural padding, and when you have max-width in place, that will help keep your component from getting too big.

  Here's my solution for this challenge which might give you some ideas to try out. Good luck!

  0