Four card feature section challenge hub using grid
Design comparison
Solution retrospective
First time using display: grid; on a project and first time starting on mobile and converting to desktop. Also, first time using flex's align-self to manipulate a single element. Which makes things simple and responsive. Any feedback on my code is greatly appreciated. Also, random question, but why do a lot of developers use @import for fonts instead of <link>? Whenever I go to someone else repository to study their code, almost all of them use @import. Whereas, I learned the <link> method and have since been using the <link> method. What are the differences, if there are any, and should I switch methods?
Community feedback
- @grace-snowPosted almost 3 years ago
I’m seeing some overlapping content on mobile. I expect it’s caused by strange grid template row values in percentages. Remember auto is fine to use, as is gap instead of margin
Really important not to resize font size on the html element, only body. Body and html are not the same and shouldn’t have all the same styles applied
In the html, the heading should be one h1, not 2. That’s how it reads, so keep it as one element with a span or strong inside set to display block
Look up how to do the alt attribute on decorative images like these, that’s important to know
Good luck
0
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