Design comparison
Solution retrospective
Iam Proud that this task made me learn new things and i learned them quickly
What challenges did you encounter, and how did you overcome them?i've had problem with the media query (the mobile version) i don't know what to do for the mobile version all i made is a margin left and right when it is between the 375px and 390px to avoid the card getting the full width.
What specific areas of your project would you like help with?how to make the mobile version or what to do to solve it right
Community feedback
- @KapteynUniversePosted 2 days ago
Design images are just how it looks at 375 and 1440px. You don't need to make something for 375 and another for 1440. Real challenge is make it responsive from 320 to infinity and beyond.
For this one you don't need a media query. You already set a
width: 375px;
to the .parent and that is all you need. Avoid using hard coded values like that tho. Usemax-width: 375px;
instead,max-width: 20/25rem
would be even better.Marked as helpful1@AhmedMahmoud6Posted 1 day ago@KapteynUniverse sorry i don't understand what's the difference in this scenario between using width and max-width, i mean here i didn't use min-width or something to use max-width so can you explain me what's the difference in this scenario.
0@KapteynUniversePosted 1 day ago@AhmedMahmoud6 For this challenge there isn't much difference because of the flex on the body, your cards width changing on small screens. But if the card was in the main landmark, because every page needs landmarks for accesibility, it wasn't going to shrink and overflow to of screen.
Width means that elements size is fixed, can't get any bigger or smaller. It will cause responsive issues on the future.
Min-width is not something to use all the time but max-width is. It is basically saying i want this item to be at this width but when the screen size is small it can also shrink.
Marked as helpful1
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