Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Html css bootstrap

Saleiuxā€¢ 250

@Saleiux

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I need help with responsive design, I don't know how to do that! And I think my image is not really the same as the example! HELP, everything is usefull!

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @Saleiux!

Your solution looks very good!

About responsiveness:

  • Always use the mobile first approach. This makes responsiveness easier. It's always harder to adapt a project from desktop versions to mobile screen sizes. Once the mobile version is finished, we frequently have to just make minor changes.

Start by mobile version and then you create a @media (min-width: /* value here */) like you did in this project to set the changes you need.

In this case, from mobile to desktop version, you basically have to change the card orientation from vertical to horizontal and maybe set a max-width so the card won't overgrow. I know it's easier to say than to do it, but try the mobile first approach.

I hope it helps!

Marked as helpful

0

Saleiuxā€¢ 250

@Saleiux

Posted

Thank you daniel! so helpful @danielmrz-dev

1

Please log in to post a comment

Log in with GitHub
Discord logo

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