Product preview card component

Community feedback

• 

  P

  FO•155

  @de-furkanPosted over 2 years ago

  Hey great design 👏🏻

  I would recommend using em units instead of px on the media queries. These scale better for different devices. But do have a read on how to do this, because the em works on the default 16px, not on what ever you have scaled the fonts down to. It works a little differently, but do check it out on youtube. I hope that helps :))

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Kaity, congratulations for your new solution!

  I saw your solution and I can say you that you've a great solution here, the design is perfect and its fully responsive!

  There are 3 things you can do to improve it even more:

  1.Use the tag <picture> instead of div to wrap the mobile and design image.

  2.Create a media query reducing 20% the font-sizes this way the content have a better fit when scaling under 300px.

  3.Create a media query to break the pricing section into two rows to save space:

  @media (max-width: 320px) {
  .price {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0