Product Preview card component

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hi, phantomXXS. How are you?

  1. The responsiveness is not so good

     In the desktop mode, you have set max-width on the parent container. which means that the container will not be wider than 700px. But if i resize the window the container also gets resized and its width changes. The content container is going to take as much width, it needs to fit its content. And when the size of parent container starts decreasing, the width compensation is made from the image width. Because of which image starts losing focus.

     You should set the max-width: 700px to a fixed with, which will make the card have a constant size. And image won't have to adjust.

  2. I couldn't figure out the active states

     There are two active states. One is when you hover over the add to card button. And other is the change in the font of product description. You''ll have to use javascript to change the font size. You can use mouseenter event on the addtocart button. And when the mouse hover over the add to card button, you can use CSS hover pseudo class to change button's background-color and JS to change the font size of the product description. Also use mouseout event to change the product description font back to previous size.

  3. My positioning and scaling(heights and widths) is a major problem for me but I Tried

  You're giving a height of 80vh to product in your mobile mode, which is making the product container short. Remove it or set it to "min-height: auto"

  Marked as helpful

  1

  ---

  

  Phantomxxs•20

  @sharonolatPosted over 2 years ago

  @pradeeps4ini Hello. Thank you so much. I would try all these out and get back to you(if that’s okay please?)

  0

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  @sharonolat Sure man, i am also learning just like you. We all need to help each other to keep learning and grow.

  1