Product Card Component using FlexBox & Grid

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  Nice job on desktop mobile still needs a bit of work. You can the following media query to stack the sections.

  @media (max-width: 640px) {
  .card {
      grid-template-columns: 1fr;
      max-width: 375px;
      margin: 2rem;
  }
  
  img.img {
      height: 300px;
      object-fit: cover;
  }
  }
  

  Also change the height: 100vh to min-height: 100vh to prevent overflow. Hope this is helpful.

  1

  ---

  

  Aatif Sohel•140

  @aatifsohelPosted about 2 years ago

  @hyrongennike Thank you for the feedback!

  I tried what you've said, but for some reason it causes horizontal overflow and the card itself not fitting inside the view? How can I resolve it?

  0

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @aatifsohel The above media query should not cause overflow as a max-width is being used I would suggesting using the developer tools see if some of you rules are overwriting it you would then have to make the media query selector more specific.

  .picture {
      width: 100%;
      height: auto;
  }
  

  you can also add the above in that media query. Let me know if it still doesn't work

  Marked as helpful

  0

  

  Aatif Sohel•140

  @aatifsohelPosted about 2 years ago

  @hyrongennike Thank you!

  0