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 scaling grid

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