Product Preview Card Component using Flexbox

Community feedback

• 

  Maxime•430

  @maxime927Posted about 2 years ago

  Hi Max, hope you're fine :) Your solution is really great, simple and efficient !

  Concerning the position of the picture for the mobile, it should be better to have a second image for mobile, or in this case, and considering that every picture will be like this, you can add to the .card-img style, the attribute : object-position: 0 -100px; for mobile. it is just about the position of where your image will start with the two axes x an y.

  But i prefere to use the picture tag and precise 2 different sizes for my image like this :

  <picture>
      <source media="(min-width: 1024px)" srcset="images/image-product-desktop.jpg">
      <img src="images/image-product-mobile.jpg" alt="">
  </picture>
  

  Reverse the media query if you prefer the desktop first approach.

  Hope it helps

  Marked as helpful

  0

  ---

  

  Max Lockwood•60

  @Max88-gitPosted about 2 years ago

  @maxime927 Hi Maxime,

  Thanks for your help, I appreciate your feedback. Using the object-position kind of helped, but the image still looks scaled-up from the mobile-design.

  I agree with you, I think the picture element is the best way to go for more flexibility.

  0