Design comparison
Solution retrospective
I'm most proud of making the layout responsive. Next time, I'd work on optimizing the images for faster loading. I had difficulty with aligning some elements on mobile screens. I solved this by using media queries and testing different breakpoints.
What challenges did you encounter, and how did you overcome them?I couldn't find what to use until I found out that grid-template-areas is the solution.
What specific areas of your project would you like help with?I’m happy with the layout on larger screens, but I’m struggling to get the mobile layout perfect. Any advice on improving the mobile responsiveness?
Community feedback
- @Dpal88Posted 2 days ago
Hi @Mohammad-Irfan-Noorzada,
Great job on completing this challenge!
This challenge can be a little tricky, but you did a nice job on matching the desktop design!
Your mobile layout looks good, but I see what you mean about it not quite matching the mockup images.
My suggestion to you for future projects would be to use a mobile first layout approach, which just means to write the CSS for smaller screens first, and then use media queries for tablet & desktop devices.
If you start using this approach I think you'll find it much easier to create your mobile layout. Also I've done this same challenge using the mobile first approach if you would like to take a look at my profile.
I hope this helps you, and if you have any questions feel free to reach out!
Marked as helpful0@Mohammad-Irfan-NoorzadaPosted about 22 hours ago@Dpal88 Hey! Thank you so much for your suggestion and I really appreciate what you've said. Next time I'll do the mobile first!
1
Please log in to post a comment
Log in with GitHub
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