search

arnaudleray / pocketgrid

PocketGrid is a lightweight pure CSS grid system for Responsive Web Design. Moreover, it is semantic, mobile-first, and allows to have an unlimited number of columns and breakpoints.
http://arnaudleray.github.io/pocketgrid/
MIT License
321 stars 48 forks source link

Clear Left on Automatic Rowas #11

Open jsanglier opened 9 years ago

jsanglier commented 9 years ago

Hi

Having a lot of fun with your baby!

On the documentation for automatic rows in real life (or perhaps on the demo page) you might want to point out that with media queries, if you set one "clear:left" parameter in one query, you need to kill it off in the next one up.

So, Say you have two media queries with a box

@media only screen and (min-width: 30.063em) { .box2 { width: 33.33%; } .box2:nth-child(3n+1) { clear: left; } } @media only screen and (min-width: 64.063em) { .box2 { width: 20%; } .box2:nth-child(3n+1) { clear: none; } .box2:nth-child(5n+1) { clear: left; }
}

In the larger one you need to clear:none the box2:nth-child(3n+1) other wise it will mess up your attempt at 5 columns!

I just spent an hour staring at the obvious wondering why it didn't work, so thought I would put it here for the next idiot like me!

microcipcip commented 9 years ago

Another related note about the documentation, on this page, the text: "The "clear: left" solution is not compatible with IE6 and IE7." is not accurate, the nth-child is not supported on IE8 too.