Responsive card component

Community feedback

• 

  Fernando Pérez•320

  @fermopPosted almost 2 years ago

  Hi Matteo, how are you?

  Answering to your question, you can get rid of that white space by doing the following:

  .product-showcase {
    width: 100%;
    display: block;     <--
  }
  

  The img tag has a display: inline by default, which adds that white space.

  Suggestions

  • You have one accessibility report and it's because your img tag doesn't have an alt attribute. Images must have alt text unless it is a decorative image, for any decorative image each img tag must have empty alt="".
  • I highly recomend you to always use rem, this way your page will always be responsive to any user's settings. There's a VS Code extension that converts px to rem and viceversa by tapping alt + z. The extension is px to rem by Marco N.

  The rest looks great! 🎉

  Hope it helps! any questions feel free to answer this comment. :)

  Marked as helpful

  2

  ---

  

  Matteo•10

  @matteoprendiPosted almost 2 years ago

  @fermop Thanks for the helpful tips, the image is working just fine now. About the width though, I read online (GeeksForGeeks I think, not too sure though) that if you only have two devices (only mobile and desktop) it's better that you set the width a bit bigger than the breakpoint for individual components, does that have any truth to it or should I be more careful about what I read?

  Edit: just checked through the HTML for the image without alt, am I supposed to put an empty alt tag even though it is an SVG? Is there any tag that I can use that is optimized for SVG?

  0