Skip to content
Submitted about 2 months ago

Responsive Product Card Page with Media Queries

DevDaru•100
@DevvMarko
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of how the website looks and how great it looks on mobile and desktop. In my next project I will try to use SASS to make my css look better.

What challenges did you encounter, and how did you overcome them?

Thing where i was stopped was, what minimum width i should use to change layout for desktop. And then i found on w3schools breakpoints for different size of screens. Link to source is on my github project.

What specific areas of your project would you like help with?

I would to help with how to make responsive layout.

Code

Please log in to post a comment

Log in

Community feedback

  • Nemo (m-one) Anderson•170
    @nemoanderson

    For your mobile and desktop images, use the <picture> tag. I saves bandwidth and selects automatically based on the size. I'm learning about it myself but it's a game changer. Let me know if it was useful.

    Are you using em's sizing just based off parent? Someone told me to use rem, just looking for best advice for sizing choices.

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