Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by dingus blank
dingus blank
3,229 Points

Stuck at grid placement - report (none answered :( )

Hey guys im stuck with my grid atm, i want to either use mediaquaries or make grid more flexible. So im trying to make it go from 2 items on 1 row too 1 item per row when it goes to mobile scale, how do i do this? (i made a pencode (first time doing that btw) and i know its a bit messy, but i have displayed the boxes with white text + yellow button on as info boxes and the colored red, orange and purple boxes (supposed to be images)

Now i want them to be displayed like this when the window goes phone size: "picture" "info" "picture" "info" "picture" "info"

I hope u understood my broken english :( i can only use CSS and HTML btw please help!

Codepen: https://codepen.io/dingus/pen/YJrprd

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It looks like you're trying to adjust the positions of children of grid items instead of grid items.

Remember only the direct children of an element set to "display: grid" are grid items. So you will probably need to re-structure the HTML to make sure the elments you want to place with the grid are actually grid items.

Once you get that fixed, it should be relatively simple to change the grid into a single column in your media query.

And have you seen these other fun learning resources for learning grids?

dingus blank
dingus blank
3,229 Points
dingus blank
dingus blank
3,229 Points

I figured it out, i just had to place "display: block;" in the media quary :-D!

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

So you just disabled the grid entirely — pretty clever!

dingus blank
dingus blank
3,229 Points

Yeah! I spendt maybe 3 weeks understanding any of this haha! But i learned alot doing this assignment so im very happy with the task ! Now i just need to learn even more depth