Product preview card component

Community feedback

• 

  juss-10•40

  @juss-10Posted 10 months ago

  Hello!

  The live version seems to have the same issues at the screenshot. These issues are apparent when the viewport width is 1440px or wider (from your media query).

  For me, the product card is not centered and overflowing. This is largely because you used fixed width values everywhere, but you could also benefit from using better HTML structure. Images as flex children can also be unintuitive.

  Overflow

  • At larger screen sizes, you can see that the product card is overflowing if you temporarily set overflow: auto on <main>. Then remove that.

  HTML structure

  • I would not use <main> as the container for the product card. You might use <article>, <section>, or <div>, but first read through the rest of the issues.

  Fixed dimensions

  • Avoid using fixed dimensions with width and height, especially if the element contains text. Instead, use max-width or max-height.

  • Remove both width: 343px; and width: 600px; (from the media query) from <main>. Instead, set a max-width that the product component should be.

  • Remove width: 236px; from main > div (the content side).

  • Remove width: 295px from the button. Use width: 100%; or use flexbox to make the button stretch horizontally with align-items.

  Image is flex parent

  • display: inherit; is inheriting display: flex;. The image should be display: block;

  Box sizing

  • Add * { box-sizing: border-box; }. This uses the universal selector to target all elements to use the border-box sizing model, which is more intuitive than the default. This is related to the box model, and you should be familiar with both. Go read what the difference is if you are not already familiar with it because normally you would always add this.

  Images as flex children

  • The behavior with images as direct flex children is not intuitive, so I would recommend to not use them as flex children and instead use a wrapping element as the flex child, like a <div> or <picture>. Place the image inside those. You can use object-fit to make adjustments if needed.

  Use <picture>

  • Don't use two different image elements and hide one of them at different media queries. Instead, use the <picture>, <source>, and <img> elements together. The <source> element accepts a media attribute to tell when the image should be displayed, e.g. <source media="(min-width: 75rem)" srcset="your-image.png">.

  Links to learn more:

  • <picture>
  • box-sizing
  • object-fit
  • Box model

  Marked as helpful

  0

  ---

  

  P

  Daniel-Sebastian Buhaianu•180

  @daniel-sebastian-buhaianuPosted 10 months ago

  @juss-10 Thank you very much for this valuable feedback.

  0
• 

  P

  Daniel-Sebastian Buhaianu•180

  @daniel-sebastian-buhaianuPosted 10 months ago

  I don't know why the screenshot looks so bad, if you access the website you can see it's "pixel perfect" from the Figma design provided.

  2