Product preview card component using flexbox

Community feedback

• 

  P

  Brandon Smith•80

  @brsmit1993Posted 12 months ago

  Your solution visually is spot on and it's really impressive how close you got it to the original design. One small thing I did notice your for font size you're using px instead of rem. Rem is based on the root font size which is defaulted to 16px but if a user changes their default browser font size that will modify that default to be larger or smaller. This primarily just ties into making your website as accessible as possible as well as following 'best practices'. The only time you should really be using px is when you explicitly want the value to stay static otherwise things like rem, %, vw, and vh are better options to make your site more responsive. On that topic as well. Avoid using vh, vw, etc for fonts as well because that disables the browser's ability to make the fonts larger when zooming in. If you really want to dive into making at least your font responsive you can dive down the rabbit hole of clamp-generators which allows you to use the clamp function to dynamically change the size of your font based on the screen width. But that's a bit more complex and further off-topic than I should probably get. In any case, your solution looks awesome so good job. :D

  Marked as helpful

  1

  ---

  

  Mostafa Mohi•170

  @mo-oePosted 12 months ago

  @brsmit1993 Hi Brandon, I tried very hard to match the design but the font messed it up, I never got to play with rem and other measures found them very confusing, but I'll start now. Thank you for your input

  0

  Account deleted

  @mo-oe Hey brother rem units are really easy 1 rem = 16px but if they confuse you then you can use converters. px to rem converter

  0
• Account deleted

  Hello there

  Your solution is just great but I have a small suggestion for you

  To switch images you have used the background image property and it is really a good idea but there is no way to add alternative value to the background images and these images are not for decoration, they have a meaning and that's why here you can use <picture> tag to switch images

  you can refer this to understand about <picture> tag link

  I hope you found it useful

  Marked as helpful

  1

  ---

  

  Mostafa Mohi•170

  @mo-oePosted 12 months ago

  @MrSandeepSharma, This first time I heard about this element, had to look it up, it's easy to use and better, work like a media query. This is life saver, thanks for your input, Sandeep. :)

  0