Skip to content
Submitted over 2 years ago

Product Preview Card using CSS flex box

Bharath Manjunath•20
@BharathBhatta20
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I want to know the other approach of displaying the different image for Mobile and Web view ? I am happy to take feedback on other best responsive design ways.

Community feedback

  • Willy Fajar Ramadhan•360
    @wllyvxPosted over 2 years ago

    Hi Bharath! The other approach is by using <picture> html element which doesn't require css for swapping images on specific media queries. Here's the link to the documentation if you want to read more about it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Oh, by the way, I think you're submitting to the wrong challenge 😁 this is for huddle landing page not the product preview one

    0
    Bharath Manjunath•20
    @BharathBhatta20Posted over 2 years ago

    @wllyvx Thank you for your review, I will go through the picture tag.

    Yes, I missed it and submitted wrongly with this challenge 😄

    0

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