Responsive Product Card

Community feedback

• 

  mihai2537•190

  @mihai3636Posted 7 months ago

  Hello, there!

  Very nice solution! Here are some tricks which I hope you might find helpful:

  • you could set the body min-height to 100vh, make it a flex container and justify-content center and align-items center, then the product will be centered. Something like this:

  body {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
  }
  

  By doing this you could get rid of the margin auto trick and you'll have it vertically centered as well.

  • nice attempt with the before price. If you'd like the line to cross the old price, all there is left to do is to use bottom: 50%;

  .product-box .info .before-sale::before {
   bottom: 50%;
  }
  

  • another nice way to solve this line cross would be to make use of the <s> tag. It's a more semantic html way of crossing some text, you should google it.
  • last but not least, I would add some more top and bottom padding to the right panel
  • I also think the button has a different font from the design, you should check out the style guide for the 2nd font

  Let me know if you've got any questions, keep up the good work!

  0

  ---

  

  Abdelrahman mohamed•230

  @Tayara97Posted 7 months ago

  I appreciate your help thanks @mihai3636

  0