Design comparison
SolutionDesign
Solution retrospective
What did you find difficult while building the project? The size for mobile and desktop. Should I use pixels or percentages and why?
Which areas of your code are you unsure of? In .container for mobile and desktop size.
Do you have any questions about best practices? Based on the code I wrote, any recommendation you can give me?
Community feedback
- @dev-mksinghPosted 9 months ago
Hey @ReyCrisGit here to answer your queries :
- You should use percentage unit when you have to make the elements grow or shrink when you resize the screen, using pixels will not do this and will always have fixed width/height that may cause overflow of the content on smaller screen.
- You are unsure about container for mobile and desktop, because as i can see in your code, you have used the same properties in both places (for mobile and desktop). There was no need for such redundant properties if you would have defined it well in mobile version, only thing you would have needed in bigger(laptop etc ) screen was to change the
flex-direction : row
and might have to set the width. - Yes use
mobile-first approach
properly, it will make your code better and easier to work with. Rather defining properties for different sizes try to use DRY method. Also for bigger screen you used@media-queries (min-width: 1440px)
do you think all laptop screens comes with this resolution? better would bemedia-queries (min-width: 768px)
Hope this is helpful and you have your answers. All the best
Marked as helpful0@ReyCrisGitPosted 9 months ago@dev-mksingh ¡I'm finding this very helpful and yes! I have my answers. Thank you so much!
0@dev-mksinghPosted 9 months ago@ReyCrisGit Dont forget to mark it as helpful :D
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