Product preview card component

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @LekhaKumar,

  Good job on the challenge

  You can either use negative margin to pull it up, negative transform:translateY() or you can add the below.

  .before-discount {
      vertical-align: super;
  }
  

  ideally I would suggestion just wrapping both the h2 and p in a div and using flexbox. Hope this is helpful.

  Marked as helpful

  3

  ---

  

  Hamsalekha•90

  @LekhaKumarPosted about 2 years ago

  @hyrongennike, thank you so much. I will surely take note of it and modify it as you said.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Hamsalekha, Congratulations on completing this challenge!

  I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code.You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Hamsalekha•90

  @LekhaKumarPosted about 2 years ago

  @correlucas thank you so much. I will correct them using the mentioned tag for better SEO. Thanks for the link, I will check it now. Have a nice day, Lucas :)

  0
• 

  Luca•350

  @lgorvinPosted about 2 years ago

  Well done! Looks great so far. The blue border appears because you are using the btn-primary bootstrap class. With that class removed it should work without the blue border appearing.

  Marked as helpful

  1

  ---

  

  Hamsalekha•90

  @LekhaKumarPosted about 2 years ago

  @lgorvin thank you so much. Will remove it. Thanks again!

  0