Product card in CSS using Flexbox and media queries

Community feedback

• 

  Betelhem•250

  @ManaIsraelPosted about 2 years ago

  I think you could do this since you're not using img tag for displaying the images: background-image: url(/FrontEndMentor01/images/image-product-mobile.jpg) center no-repeat;

  Marked as helpful

  1

  ---

  

  Betelhem•250

  @ManaIsraelPosted about 2 years ago

  @ManaIsrael If you were using the img tag you could use the object-fit css property.

  1

  

  Gus•60

  @angusgeePosted about 2 years ago

  @ManaIsrael thanks mate! 🙌

  1

  

  Betelhem•250

  @ManaIsraelPosted about 2 years ago

  @MaltaWebDev Very glad it helped you

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello MaltaWebDev, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  I don't see any mistake with the mobile version, I think you've here a great start and first solution. This is amazing. Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html.

  Here's how to use it if you're not familiar to this tag https://www.w3schools.com/tags/tag_picture.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Gus•60

  @angusgeePosted about 2 years ago

  @correlucas cheers for your tip and your kind words Lucas! No I wasn't aware of that tag, thanks again!! 🔥🔥🙌

  0

  

  Gus•60

  @angusgeePosted about 2 years ago

  @correlucas qq how can I get the DESIGN COMPARISON above? Is it possible to use this feature before submitting? Like in a CSS battle. I can see now that my solution is way bigger than the design 😒

  0