Product Preview Card Component

Community feedback

• 

  Riki Wendri•1,380

  @F4YYPosted over 1 year ago

  Hi @eudeees,

  Congratulation for successfully completing the challenge... it's so pretty...

  There is a little suggestion to make it more similar to given design. To make app adaptive to mobile screens and adjust the image accordingly, you can use media queries and update the image source toimages/image-product-mobile.jpg when the screen width is less than 481px. There are common breakpoints:

  • Mobile devices: 320px — 480px.
  • iPads, Tablets: 481px — 768px.
  • Small screens, laptops: 769px — 1024px.
  • Desktops, large screens: 1025px — 1200px.
  • Extra large screens, TV: 1201px, and more.

  Here's such CSS code snippet (you can adjust and customize it as you want):

  @media (max-width: 480px) {
  .container {
  flex-direction: column;
  align-items: center;
  }
  }
  

  Hope that could be pretty much Helpful. Keep happy coding...

  Marked as helpful

  0

  ---

  

  eudeees•50

  @eudeeesPosted over 1 year ago

  Hello @F4YY, Very happy to have finished this project! and thank you very much for the tip, I will add it to my projects. Any help is welcome!

  0