Product Preview card solution

Community feedback

• 

  Adriana•60

  @AdrianaMagdalenaPosted over 1 year 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
• 

  Timothy Fawcett•250

  @timbosToursPosted over 1 year ago

  hello friend,

  In order to show/hide the different images for desktop and mobile you can use display: none; inside of a css media query. https://www.w3schools.com/cssref/css3_pr_mediaquery.php

  And heres a great article I found about alignment. https://dev.to/venkyakshaya/the-ultimate-guide-to-center-align-css-2h9l

  Hope that helps and Good Luck!

  Marked as helpful

  0

  ---

  

  Q8LPs6Vs•100

  @Q8LPs6VsPosted over 1 year ago

  @timbosTours

  Alternatively you can use the <picture> element for displaying a different image for desktop and mobile.

  Marked as helpful

  0