Responsive product preview card component

Community feedback

• 

  y4rb0w•260

  @YavanhaPosted about 2 years ago

  Hello,

  first of all congratulations for the challenge.

  I looked at your code and it seems to me that you started with the desktop version before the mobile version. When doing so it's hard to maintain your code for example:

  Instead:
  
  @media (max-width: 375px) {
  .container {
    display: block ;
  }
  
  }
  .container {
    display : flex ;
  }
  }
  
  do this: 
  
  @media (min-width: 376px) {
      .container {
          display: flex ;
       }
  }
  

  The second solution allows you to use the default values of the div ( display: block) and add the complexity in the media query and most importantly avoid rewriting your properties that you have declared.

  Also avoid using fixed values for width and height.

  Finally, use the right properties for the right job:

  transform is not used to center your container.

  Hopefully this will help you a little.

  Good luck

  0

  ---

  

  Jorshuaa•10

  @JorshuaaPosted about 2 years ago

  Thanks a lot for the advice @Yavanha. I will endeavour to implement what you've said. Thanks again.

  1