CSS grid-area example not working in chrome mobile
I'm watching the video "Why CSS grid-area is the best property for laying out content" (https://www.youtube.com/watch?v=duH4DLq5yoo) and have copied the code from codepen into an empty project.
The columns work fine in desktop chrome but when accessing from phone or choosing "Mobile" in responsive view the areas does not stack. Anyone else have experienced this?
Kevin Powell
YouTube
Why CSS grid-area is the best property for laying out content
CSS Grid is amazing, and grid-area just make it so much better. When grid first launched I loved the idea of grid areas, but didn't get fully on board as it seemed like a little too much work... but once you start actually using them on a regular basis, you realize that while the initial setup in slightly longer, in the long run you can save a b...
12 Replies
If you share your codepen somebody might be able to take a look
Without code, it's impossible to tell.
Type in "code.new" in the browser, and share it with us.
Gist
CSS Grid Example from Kevin Powel
CSS Grid Example from Kevin Powel. GitHub Gist: instantly share code, notes, and snippets.
I think you mean https://pen.new
I hope github gist above will suffice.
I copied exactly what you posted.
Try copying it to actual files and serve it bare with a webserver of some kind. In Chrome responsive view, select Mobile and see if it stops working.
try adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1"> to the head 😉That was it! Thought it might be something that simple.
for future if you have a good editor it probably has emmet installed so you can just
! and hit tab to get boiler plate html 🙂