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

HTML

Posted by mc227
mc227
Courses Plus Student 6,520 Points

Responsive web: changing grids in media queries to 100%

Why in the implementing media queries videos in our small screen media query we change all of our grids to a 100% width?

If you have a fluid grid system it ain't suppose to adapt to the screen size?

this is what I'm talking about

@media screen and (max-width : 480px) {  .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,grid_9,.grid_10,.grid_11,.grid_12 {
width:100%; }

}

1 Answer

Louis Otto
Louis Otto
23,264 Points

Hi, I believe you do this so that the style to changes to a single column, whereby all the divs are placed one by one, this makes it easier to scroll on a phone as multi-column layouts don't work on phone-size screens

That's my interpretation, hope this answers your questions

mc227
mc227
Courses Plus Student 6,520 Points

Oh okay, it now makes sense to me. thank you.