Product preview card component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋🏻, some of this may interest you:

  HTML / ACCESSIBILITY:

  • The images are in the same folder as the HTML file and therefore, in order for them to be displayed, you should use the following paths: src="image-product-desktop.jpg" and src="icon-cart.svg".

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • If you're going to use more than one heading, it is good not to skip levels (start with <h1>, then <h2>, and so on).

  CSS:

  • Consider to center the content using Grid or Flexbox. As follows:

  body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  }
  

  And in this way the attribution will be well positioned and not overlapping the card.

  • Think about using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

  • If you have any questions about how to make the mobile version just ask.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  0

  ---

  

  Richard Kpehor•100

  @Richardedem6Posted over 1 year ago

  @fernandolapaz I use the image paths, but I still do not know why. You can check in my repository. But thank you, that was vey helpful.

  1

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @Richardedem6

  Hi,

  I see this path: ./images/image-product-desktop.jpg

  And it should be like this: image-product-desktop.jpg.

  Marked as helpful

  0

  

  Richard Kpehor•100

  @Richardedem6Posted over 1 year ago

  @fernandolapaz after using your suggested method, the image is no longer showing, what am I doing wrong please

  0
• 

  Batuhan Orhan•40

  @bthnorhanPosted over 1 year ago

  Your images are broken. You should check their paths.

  Marked as helpful

  0