Design comparison
Solution retrospective
I have improved from the last time I did this on a different account, the only thing that I would do differently is to try harder to find a way to get the mobile layout to work.
What challenges did you encounter, and how did you overcome them?Getting the mobile layout to apply to the website, I wasn't able to fix it.
What specific areas of your project would you like help with?If someone can review the code and help me to implement the mobile design, that would be great, I tried using a flexbox and that didn't work so I used a grid.
Community feedback
- @TedJenklerPosted 3 months ago
Hi @R3Aria,
Nice project! It looks great overall. I noticed that you’re having some difficulties with the mobile layout.
The reason you’re having trouble is that "it’s like trying to build a tower by starting on the 100th floor instead of the ground up." Always start with a mobile-first approach and watch how the site becomes responsive more naturally as you scale up.
Here are a few best practices that might help:
Use Chrome DevTools: It’s crucial for testing your design across various screen sizes. Design for mobile first, then scale up using rem or % values. Avoid setting fixed widths and heights; instead, use max-width or min-width to ensure your design is responsive.
Responsive Design: Typically, you don’t need to set fixed heights. Instead, use margin and padding to achieve a responsive layout.
I recommend checking out Kevin Powell on YouTube—he’s excellent for learning CSS and will help you become a master in no time.
I hope this feedback helps!
Best, Teodor
Marked as helpful1@R3AriaPosted 3 months ago@TedJenkler Thanks for the advice, I'll try to implement it in the next set of challenges I do.
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