Product Preview card component

Community feedback

• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge!

  Hope it helps:)...don't forget to mark it as helpful 👍

  Marked as helpful

  0

  ---

  

  Mhizdhee•50

  @MhizdheePosted over 2 years ago

  @mubizzy Thank you for the feedback

  0
• Account deleted

  Hi Mhizdhee! 👋

  This is a good start, however there are a couple things to work on:

  1. Generally speaking I wouldn't put a media query for the desktop layout's max-width - Right now, your page breaks once ultrawide displays. The container disappears, there are two of the picture and they are different sizes (It looks like both the mobile and desktop pictures are showing at once), and the cart button disappears.

  2. The 70vh you have on your wrapper and image are also an issue for larger displays, especially if I were to put the page on a display that is in portrait mode, for example. The container stretches and there is not enough content to fill it, so you end up with a lot of empty space and the image is very stretched out.

  3. Elements that can be interacted with, such as buttons, should generally have a hover state. A good rule of thumb is to give them a darker or brighter color and changing the cursor to a pointer on hover, to indicate it can be clicked. Basically you want anything that the user can interact with to scream "click me!" if they put their mouse on it 😊

  4. Your mobile layout does not current have a limit on the height of the component - I would give it a maximum so it does not end up with a lot of empty white space, similarly to my second point.

  5. On screens of about 550 to 625px width, the contents on the right of the component are going over the container. This seems to be tied to the max-width of 100% you have given to the * tag in your CSS, however removing this introduces other issues with your component not resizing as the screen size becomes smaller, so you would have to correct this on your other classes.

  I hope this helps! Let me know if you have questions, I know this is a lot - You are on the right track!

  Marked as helpful

  0

  ---

  

  Mhizdhee•50

  @MhizdheePosted over 2 years ago

  @LazyDuckling Thank you so much for the feedback

  0