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

Almost reponsive design for a product card

@l3miage-bouvier5

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 Don't how to have a design that corresponds to what the challenge wants , if someone has a responsive solution I would be thankful :)

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hey @l3miage-bouvier5!

Your project looks great!

  • The first suggestion I'd give you is to try starting the projects using the mobile first approach. It's not completely necessary, but helps you a lot when using media queries to create the tablet and/or deskto versions.

  • I've noticed that your max-width:550px media queries are making your project behave very differently. For example, you used height: 100vh; and width: 100vw; for your main, and your card is inside that. Most times, is better setting these properties for the body, not the main.

I hope it helps!

Marked as helpful

1

@l3miage-bouvier5

Posted

@danielmrz-dev Thanks ! it helps a lot i will improve it. So the vw and vh can replace some media queries ? it makes the site responsive because its calculated on the size of the device, right ?

1
Daniel 🛸 44,230

@danielmrz-dev

Posted

@l3miage-bouvier5

Using vh and vw do not replace media queries.

They calculate width and height on the size of the device, but they don't change the arrengement of the elements!

For example, if your mobile version is vertical and your desktop version is horizontal, simply using vh and vw won't change this arrengement.

0

@l3miage-bouvier5

Posted

@danielmrz-dev Oh ok i got it, thanks

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