Product preview card component using HTML & CSS

Community feedback

• 

  P

  Treasure Kabareebe•290

  @trekab

  Posted almost 3 years ago

  Nicely done, @Yahir-am! I like your use of CSS variables. They make your CSS readable and more maintainable. However, here are some suggestions to make your page look even better:

  • The mobile version appears to have some excess bottom white spacing after the button. Clearing this would make your page look more like the design spec.
  • It would also be great to provide a fallback font whenever you specify a font family in your CSS. e.g. font-family: "Montserrat", sans-serif; would imply that sans-serif is the fallback font. I find the introduction of this article(CSS Fallback Fonts) insightful about fallback fonts.
  • Finally, writing mobile-first CSS is a nice practice to follow when building responsive web pages. Here is a great article for more insight.

  I hope you find this feedback beneficial

  Happy coding!

  00

  Marked as helpful
• Account deletedPosted almost 3 years ago

  Hi Yahir,

  Great solution! This is looking really good.

  The only thing I would suggest is limiting the height on mobile/smaller screens - The width resizes nicely, however the height adjusts to the screen's size without there being any content, so you end up with a lot of empty white space below the button.

  Other than that, this looks spot on! Well done 😊

  00

  Marked as helpful
• 

  Akanni Feyisara•110

  @Feyisara2306

  Posted almost 3 years ago

  Well done! You have no issue at all. I just completed the same project but it isn't as perfect as yours. I've got some questions if you don't mind, how did you centralize the elements on the page? and also, the display I get on my browser when coding isn't the same as the one that shows with the live site url, I want to know what I'm doing wrong, Thanks.

  10