Product preview card component

Community feedback

• 

  Adepoju Oluwatobi•200

  @adepoju-oluwatobiPosted over 1 year ago

  Rem would work fine, but i also used percentage for the box sizing since it is responsive on its own.

  Marked as helpful

  1
• 

  Steve•1,170

  @peanutbutterjllyPosted over 1 year ago

  hey 👋,

  All REM is doing is saying that the size is equal to the root elements font size.

  typically the root element's default font-size is around 16px; so 1rem is equal to 16px, 2rem is 32px, 3rem is 48px, and so on.

  The reason it's preferred to use rems instead of pixels is because when someone changes the font-size (e.g: zooms in/out), if the page has set measurements in pixels instead of rems, those measurements won't change. if the measurements are in rems and someone zooms in/out, then the page will grow/shrink as necessary.

  all that to say is that using rems is more of an accessibility fix rather than a responsive fix - here's an article by Austin Gil that explains a little bit:

  Austin Gil: px or rem

  if you want responsive typography, you can use the clamp() function to help with that:

  MDN: clamp()

  and here's an article covering responsiveness in general:

  web.dev: responsive design basics

  hope that helps!

  by the way, your solution looks great; looks bout pixel perfect

  Marked as helpful

  1

  ---

  

  Bowen•280

  @bowen-weiPosted over 1 year ago

  Thanks a lot for your recommendation ! @peanutbutterjlly

  1