All comments

• 

  Nikkaburger• 140

  @Nikkaburger

  Submitted 12 months ago

  • Displaying different images for desktop and mobile version. Aligning the discounted price to the centered height of the price.
  • None
  • Any best practices method to align the discounted price to mid height of the price.

  

  Product Preview card solution

  2

  3

  0

  

  Adriana• 60

  @AdrianaMagdalena

  Posted 12 months ago

  Hi there!

  I can help with the alignment of the price, I solved it by using flexbox. You'd have to put both prices into a div container (let's give it a class of "flex-group" for this example), and set it's display to flex, then align the items to the center. With flexbox you can also set a nice gap between the prices too.

  So the CSS would look like following:

  .flex-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  }
  

  Hope that helps!

  Marked as helpful

  0