Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Responsive collapse zentools 2 grid

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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
  • richarddhill's Avatar
  • richarddhill
  • 6 Month Developer
  • 193 posts
  • 3 Thanks
  • Karma: 5
Last Edit: 5 years 3 months ago by richarddhill. Reason: Heading was unclear
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: richarddhill
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
  • richarddhill's Avatar
  • richarddhill
  • 6 Month Developer
  • 193 posts
  • 3 Thanks
  • Karma: 5
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers