Responsive Product preview card component

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Hi!

  Good job, congrats =)

  You have already been told about fonts, but I want to add a couple suggestions.

  • Use rem values for font sizes. It's a relative units, which value depends of user's font settings, so they provide a better UX.
  • You can use picture tag to dynamically switch images on different versions.

  <picture>
      <source srcset="mobile.jpg" media="(max-width: 900px)">
      <img src="desktop.jpg" alt="">
  </picture>
  

  • And I'm not really sure about type="submit" of the button. Usually this type used inside forms. Also this project is out of context, so we don't know whether this button updates cart locally or send data to the server. Actually, that's not a big deal, just be aware =)

  Overall it's a great work, keep doing =)

  Marked as helpful

  1

  ---

  

  P

  Joshua Hovis•200

  @joshhovisPosted 4 months ago

  @Alex-Archer-I

  Thanks for the information! I did not know that about the <picture> tag, that is great information to know. I know about rem and em but I always forget to use them over px. That's a habit I need to get into.

  And yes I wasn't sure about the type on the button, I thought I might've needed it since I was giving it an onclick action, but you're right, it's probably not necessary

  Thanks!

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @joshhovis

  Hey, you're welcome!

  I'm still tying to get the rem habit too. I mean, I use them for font sizes but still have to think twice with other properties.

  As for the button usually click events added by JS cos it often used for some in-page interactivity. Also a button in a form have type="submit" by default.

  Anyway, glad I could help. Feel free to ask, comment and stuff =)

  0
• 

  P

  gakrita•140

  @gakritaPosted 4 months ago

  Hi, there! You should insert the font-family: "Montserrat", sans-serif; in the body and font-family: "Fraunces", serif; in the .header. Keep going!

  1
• 

  WXSanchez•80

  @WXSanchezPosted 4 months ago

  I think you just forgot to add the fonts in. But other than that looks great!

  1