Product preview card component

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Hey, mei-e! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this one! 👍

  A few things I'd like to suggest are,

  • Setting the width of the card component in this challenge to `100%` and then adding a max-width to it to prevent it from becoming too wide when there's plenty of space around it. This is often better than setting the width of the element to a fixed value or percentage because it'll ensure that the element takes up as much space as it should be allowed but also shrinks accordingly when its parent element shrinks.
  • Avoiding setting specific heights for things like containers and sections in your page. It's often better to simply allow the height of elements to be determined by their content (which is their default behavior) because then they will be just as high as they need to in order to accommodate what's inside them. You can always use margin or padding to add extra space around or inside those elements if desired.
  • Making sure to use only h1 tag on your page (since there should only be one most important, main heading per page). Use less important heading tags (such as h2, h3, etc.) for all other headings.
  • Specifying values such as `margin`, `padding`, `font-size`, and more in a responsive unit such as `em` or `rem` (not `px`, which is a fixed unit), to ensure that changing the font-size of the document causes the rest of the site to scale up/down (which is important for accessibility reasons). To learn more about `em` and `rem`, see this helpful article.
  • Adding some more descriptive alt text for the images in this challenge (since that text will be read by screen readers) or simply leaving the alt text blank if those images are not important to the content of the page and can safely be ignored by screen readers.

  Hope you find these tips helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2

  ---

  

  mei-e•30

  @mei-ePosted over 2 years ago

  @ApplePieGiraffe will take note of these ! thank you for the tips :)

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  @mei-e

  Welcome! 😊

  0
• 

  Melad•220

  @melad99Posted over 2 years ago

  after giving width and height to the main <div> for the card you can give the text also a width so it will match the design.

  HTML:

  <h1 class="hh1">Gabrielle Essence Eau De Parfum </h1>

  STYLE:

  hh1{ width: 250px; line-height: 30px; font-family: 'Fraunces', serif; font-weight: 700; }

  I hope that I understand your problem and this will help

  Marked as helpful

  1

  ---

  

  mei-e•30

  @mei-ePosted over 2 years ago

  @melad99 will take note of this ! thank you for the help :)

  0

  

  Melad•220

  @melad99Posted over 2 years ago

  @mei-e Welcome 😊

  0