Simple Responsive Product Card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 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!

  Marked as helpful

  1

  ---

  

  Aviral•160

  @AkunamoPosted about 2 years ago

  @correlucas Hey Lucas Thanks for pointing that out, as i am not really good at testing my CSS. I had no idea that there might be devices smaller than 350px. Well but as I want to be a better Front-end Developer, I also want to make my website as responsive as it can be no matter the screen size. Thank you.

  Oh and i wonder how you use that V sign emote?

  0
• 

  Luigi•240

  @luigi-peronePosted about 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 👋

  Marked as helpful

  1

  ---

  

  Aviral•160

  @AkunamoPosted about 2 years ago

  @luigi-perone Thanx for feedback luigi. I am really bad with accessibility and stuff and that's why i am specifically working on the accessibility and trying to use sementic tags as much as possible.I greatly appreciate your feedback (English is'nt my native language so sorry for my bad English)

  1