Hi,

Maybe I have missed this in the documentation, but I can't find a way to exercise some control the collapse of the grid in zentools2

My example is a 4 column display, which collapses first to 3 across and 1 underneath before collapsing again to 2 x 2 and then 1 x 4.

The 3 across and 1 underneath is the real problem, as it just looks untidy. Is there a way to "force" a jump straight to the 2 x 2 option?

If you want to see the current problem, it is visible on www.digsswansea.biz/

Great if someone can give me some pointers, please.

Best wishes


Richard

Hi Richard,

I will check this as zentools2 is very new and has lots of new stuff but at the moment, I'd try

@media (max-width: 1200px) and (min-width: 620px){
#grid5 [grid-col~='1/4'] {width: 50%;}
}

@media (max-width: 1200px) and (min-width: 787px) {
#grid5 [grid-col~='1/4']:nth-child(2n+1) {clear: left;}
}

I would if you wanted to replace different modules use module id

Hi Paulus,

Thank you for this. This didn't quite work but gave us the clue for the answer. In case anyone has the same issues, the following is what did work (including our comments from the work):

@media (max-width: 1200px) and (min-width: 620px){
#grid5 [grid-col~='1/4'] {width: 50%;}
}
/* Changed 2n+1 to 3n+1 & clear:left to clear:none seemed to work */
@media (max-width: 1200px) and (min-width: 787px) {
#grid5 [grid-col~='1/4']:nth-child(3n+1) {clear: none;}
}


We were puzzled by the [grid-col~='1/4'] reference (although we can sort of work out what id does). Is there a tutorial/explanation on how to use this?

Last is a wishlist - if it does not make zentools2 even more complex, can this degrading grid be added as a feature, so you could actually choose how you want it to appear on different devices to ensure you get balanced displays?

Best wishes


Richard

Hi Richard,

grid-col~='1/4' - it's dividing the grids up into fourths

I'm not quite sure what is involved complexity wise with the degrading grid so will check with Anthony on this

Cheers
Paul