Simple Responsive Product Card

Community feedback

• 

  Lucas 👾•104,200

  @correlucas

  Posted over 2 years ago

  👾Hello Aviral, congratulations for your new solution!

  Your solution is fine but if you note after max-width: 350px the pricing content start to pop out the container, to fix that you can use a media query to make the price content goes to different rows

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

  ✌️ I hope this helps you and happy coding!

  11

  Marked as helpful
• 

  Luigi•240

  @luigi-perone

  Posted over 2 years ago

  Hi Aviral, and welcome to the Frontend Mentor community!

  You've a great solution here but there are some tags you can consider changing in the html,the first div should be wrapped with a main tag and div with class attribution should be wrapped with a footer tag. These changes don't change the design but improve the accessibility and semantic.

  Hope it helps, happy coding 👋

  11

  Marked as helpful