Responsive product preview card component

Community feedback

• 

  y4rb0w•260

  @Yavanha

  Posted almost 3 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

  01