Four Grid Layout

Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Argh Bazz, so annoying I Jutt wrote you lots of feedback then accidentally clicked back and its deleted, sorry! 😂
I don't have time to write it all again, but the gist was that you should first look at your html again, and make sure you're using the right tags for semantic structure (as chamu has alluded to above ^)
The other thing I notice is you're using 2 grids. The power of css grid lies in two dimensional layouts, but as you're only defining columns, you're forcing it to be like flexbox instead. I'd recommend changing your html markup so all cards sit in one container, and use one grid to lay out those cards in columns and rows. That would be much better css grid practice for you.
Hope that's helpful!
- @ChamuMutezva
There are some issues highlighted in the report, it's worthwhile taking a look at them. Adding to that , your page is missing first level heading (h1). Here is why it matters according to Mozilla: "Headings facilitate page navigation for users of many assistive technologies. They also provide semantic and visual meaning and structure to the document. A first level heading (<h1>) should be present on nearly all pages. It should contain the most important heading on the page (generally the document title)."
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
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