Product Preview Card Component using HTML and CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @Ejc2us10, congratulations for your new solution!

  Here's some tips for you about responsiveness:

  First of all you need to made the card responsive changing the class cardreplacing the width with max-width to allow the card to contract:

  .card {
      max-width: 600px;
      background-color: var(--white);
      border-radius: 16px;
      overflow: hidden;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      display: flex;
      flex-direction: row;
  }
  

  The you need to make the image responsive too using display: block and max-width: 100% to make the image grow 100% of the container with and use also object-fit: cover to make the image crop while scaling

  To learnd aboutmedia queries and responsivity, here’s a good resource to learn it: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Paul Toledo•60

  @PaulawlietPosted about 2 years ago

  for media queries I find it easy to do mobile first design before moving to larger screens and it's much easier to code, this is where I studied mobile first design and it helped me for responsiveness: https://www.youtube.com/watch?v=PM3XW_1RAIs&list=PL4cUxeGkcC9hH1tAjyUPZPjbj-7s200a4

  1