Product Preview Card using react to practice modular lvl programming

Community feedback

• 

  Antonain E.•220

  @antoebtfrPosted over 2 years ago

  Hi

  It's great work but :

  • The picture and the modal are stretched between 500px et +/- 900px
  • Wrong typography

  Min/Max-width can be useful when you use relatives units like vw/vh to set an absolute limit

  Marked as helpful

  0

  ---

  

  Amit Dhakal•490

  @herojk64Posted over 2 years ago

  @antoebtfr can you suggest what I should be learning to improve those mistakes.

  0

  

  Antonain E.•220

  @antoebtfrPosted over 2 years ago

  @herojk64

  • Documentation - To not stretch the picture
  • For the typography, you had to make sure that the typo is implemented and accessible before using it.

  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">

  Typo library - Google font

  And you use to many <section>. Use <div> instead. <section> can be used for card the itself like

  <section class="preview-card"> 
  
  

  Documentation - <section>

  Same for <span>.

  /* In your code */
  <span class="Details_Details__5klp2">
  <section>
  [...]
  </section>
  </span>
  

  Use <div> instead. <span> is only used for inline-content like this

  <p> Lorem impsum about <span class="...">something</span></p>

  Documentation - <span>

  Documentation - semantic

  0