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

Jai Dandekar
Jai Dandekar
2,123 Points
Posted by Jai Dandekar
Jai Dandekar
2,123 Points

Can media queries change amount of grid columns assigned to a div?

Currently coding up a responsive site. I want the amount of images shown on each row to be 2 instead of three once it hits a certain width, which means changing the grid columns assigned to this particular div, from grid_4 to grid_6.

Can I accomplish this through css or is this something I can only do inline? I'd prefer to not shift to a new html file if possible.

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Containers and floats will get you there. This is very doable.

Are you using a framework?

Here, clearly I have way oversimplified how to restack images, but you can there isn't much required to do it.

http://codepen.io/anon/pen/nsfzI

Make sure you resize your browswer screen from big to small to see them stack from 3 to 2 to 1

Jai Dandekar
Jai Dandekar
2,123 Points
Jai Dandekar
Jai Dandekar
2,123 Points

Hey Kevin,

Thanks for your reply. To answer your question, the page is built on a custom grid. Before I translated the grid to percentages, your solution had worked.

I ended up solving the problem by swapping divs using media queries. Now it goes from 3 to 2 to 1. Thanks again.

Scott Magdalein
Scott Magdalein
2,406 Points

Another solution, which I've used in the past, is to use JS to listen/detect window width and swap the grid class when necessary. Probably not the most efficient way of doing it, but it got the job done with the fewest lines of code.