Skip to content
Submitted over 1 year ago

Product card

wisny24•10
@wisny24
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Can somebody help with responsiveness on phones?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Paras Sharma•700
    @imparassharma

    You will have to use multiple media queries according to your page. Like your page is getting messy firstly around 1450px So add one media query for 1450px and then so on check where things are getting messy and use media queries. The approach should be such that you will have to use less media queries which can be achieved if you will use proper dimension tools like %, ems, rems, vh/vw etc.

  • Saúl Ventura•60
    @saulventuragalvez

    Utilize media queries for different screen sizes.

    @media (min-width: 768px) { .left { background-image: url(../images/image-product-desktop.jpg); } }

    From 768px onwards, the image from the specified URL will be displayed. Outside the media query, another URL will be shown for screens smaller than 768px.

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