@a-yemisi
Posted
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.
@J-Jawad
Posted
@a-yemisi Thanks!! May I ask what size is your screen??(in pixels)
@a-yemisi
Posted
@J-Jawad 1192 by 550
@J-Jawad
Posted
@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.
@a-yemisi
Posted
@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 helpful
@J-Jawad
Posted
@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.
@a-yemisi
Posted
@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 helpful
