Skip to content
Submitted almost 3 years ago

Product Preview Card using CSS flex box

contentful, styled-components, foundation
Bharath Manjunath•20
@BharathBhatta20
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Willy Fajar Ramadhan•360
    @wllyvx

    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

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