Skip to content
Submitted over 1 year ago

[Solution] HTML CSS Prod Preview Comp - Anei Malieny

Anei•30
@aneimalieny
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Works perfect in web view but I faced some challenges with the mobile view because I didn't know how I could replace the image in mobile view.

I could have done research but the timer of 2hours that I set had elapsed and I didn't want to cheat on myself. So please incase you have any knowledge on how I can fix the image in mobile view, leave a comment below. Thank You!!

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    iMAGES 📸:

    • You can use the <picture> tag instead of setting images to background when you have different versions of the same image. The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
    • Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here.

    Example :

    <picture>
   <source media="(max-width: 500px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="{your alt text goes here}">
 </picture>

    .

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

    Happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord