product preview responsive

Community feedback

• 

  P

  mantis•240

  @morauszkiaPosted 6 months ago

  Hello! I liked your solution, and the change between the horizontal and vertical arrangement works really well. I only have a couple of ideas to consider to improve upon your solution.

  I liked the two different fonts used in the design. You might consider adding the other font for the title and the current price, which would make these stand out. Also, you are missing the hover/focus state for the button.

  Finally, on really small screens the cards edges overflow. You might consider adding some constraint so that there always remains some space around the card, e.g. with max-width or using clamp() or min() for the width.

  And for the border-radius, you can do it simpler, if you add the border radius to the card, and then specify overflow: hidden, which would hide the overflowing corners of the image, without needing to add the border radius there as well. So later, if you would decide to use some other border-radius, you wouldn't have to worry about changing it everywhere, and also you would't need to specify four separate values for the four corners.

  Marked as helpful

  0