Responsive product preview card, using flexbox

Community feedback

• 

  Rino•340

  @Rhinozer0sPosted over 1 year ago

  Hello Adriana ✌️

  I have a recommendation to solve your issue with the background.

  For responsiveness it is usual to use the Picture-element

  • The <picture> element contains two tags: one or more <source> tags and one <img> tag.

  • in the <source> tag you can define your media queries

  In your case it could look like this:

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

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Adriana•60

  @AdrianaMagdalenaPosted over 1 year ago

  Hi! Thank you so much! I used this solution while revamping the project today and I'll surely use it in the future too, a lot more intuitive than mine 😄

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted over 1 year ago

  @Rhinozer0s

  You only need one source; In this case it would be the "desktop" image.

  1

  

  Rino•340

  @Rhinozer0sPosted over 1 year ago

  @vcarames

  thanks for correcting me 🤝

  0
• 

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  Congratulations on completing the challenge! 🎉

  Welcome to the platform!

  Yes, for projects like this we need to figure out a way to toggle images. There are multiple ways to do that and using background-image property is perfectly fine in this situation. You might want to play with this approach for couple of projects first... and once you are comfortable with the approach and using background shorthand etc. then you may explore other methods.

  Your final solution looks nice. However I'd like highlight the following to make it nicer :)

  • Looks like there is a typo in the body declaration block height: 100dvh;

  • .wrapper may need some top margin for mobile-view.

  • Try using more html semantic elements, and avoid divs as much as possible.

  Feel free to checkout my live site and project code I've used html semantics and background shorthand.

  Once again you have done a wonderful job.

  And I look forward to see cool projects from you in the future🚀

  Keep at it...💻 Happy hacking!

  Marked as helpful

  1

  ---

  

  Adriana•60

  @AdrianaMagdalenaPosted over 1 year ago

  Thank you so much for all the suggestions, they were very helpful when I looked at the project with fresh eyes today!

  1