Design comparison
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
- @danielmrz-devPosted 12 months ago
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 usedheight: 100vh; and width: 100vw;
for your main, and your card is inside that. Most times, is better setting these properties for thebody
, not themain
.
I hope it helps!
Marked as helpful1@l3miage-bouvier5Posted 11 months ago@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@danielmrz-devPosted 11 months ago@l3miage-bouvier5
Using
vh
andvw
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
andvw
won't change this arrengement.0 -
Please log in to post a comment
Log in with GitHubJoin 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