Product_preview_card_component with html and css using flex box

Community feedback

• 

  Pierre ||| per.net•180

  @finkenmannPosted almost 2 years ago

  Start with mobile first. That is, design the simple mobile design first and then add the more complex formatting for desktop. If you go the other way, there is often a lot of code that you have to reset. Most of the mobile design is already responsive if you don't use fixed pixel values. Then find the right breakpoint where the design doesn't work properly anymore or "falls apart" and add the more complex flex or grid formatting there. Don't need background images, because they are not readable for screen readers and alt-texts are not possible. Create two images and hide one or the other depending on media-query, or use img srcset. (I have to learn this better... but it is surely the best way).

  .product-component must not have a fixed width. Tip: .product-component: width: min(90vw, 800px); margin-inline: auto. With this you have a nice flowing container, which takes 90vw (viewport width) on a small screen and is centered by margin auto. In addition, the margin grows a bit when you zoom in. At 800px the element doesn't grow any more. With this you can achieve a lot without defining a media query.

  Where do you want to use sr-only? This class is needed if you want to hide something with visibility hidden, but it should remain readable for a screen reader.

  Translated with www.DeepL.com/Translator (free version)

  0