Design comparison
Community feedback
- @a-yemisiPosted 3 months ago
Your site showed up the android format on my laptop screen, you might want to reduce the screen width where the media break occurs. Asides from that, no issues. You did well, well done.
0@J-JawadPosted 3 months ago@a-yemisi Thanks!! May I ask what size is your screen??(in pixels)
0@J-JawadPosted 3 months ago@a-yemisi Makes sense.(I set the media min-width to 1440px) I fixed it now, but i don't think it looks the best. I'll be grateful to hear your feedback and any tips you have.
0@a-yemisiPosted 3 months ago@J-Jawad Not necessarily, but you could find a way around it. For example, reduce the padding between your grid elements and the html page. Or in the transition stage, you could have another layout, a transitional layout sort-of. You can check how mine look at in different sizes, and maybe it could help.
Marked as helpful1@J-JawadPosted 3 months ago@a-yemisi I checked your code and you are right, yours is much smoother and responsive. I was not familiar with grid-template-areas. It makes setting the layout much simpler. Also, I liked how you solved my whole problem with one line:
grid-template-columns: repeat(auto-fit, minmax(16rem, auto));
.Thank you very much for your help!!
I would like to ask you one more thing, can you recommend any good YouTube channels I could learn such things from?
Again, thank you for your support.
0@a-yemisiPosted 2 months ago@J-Jawad
Sorry for the late reply, been busy.
For good YouTube Channels Kevin Powell is very good. He is the one I learnt my philosophy about responsive design from.
I also studied articles from MDN, that was very helpful too.
This also helped: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
Marked as helpful0
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