I am using @willwood’s Adaptive Grid stack (which is awesome) however I notice that on Chrome there is a 7px gap below each row of the grid that I have not witnessed on any other browser. It really takes away from the desired look of the grid. Does anyone know of a way to combat this? The site is versusapp.net and the grid can be found towards the bottom of the home page.
I have used AdaptiveGrid many times (it is brilliant) and not seen this so I suspect it is being caused by the content that sets the height of the cells or the AdaptiveGrid height column equalise option if that’s used.
I would suggest isolating the cause by creating a new test row with just test images and use the same image for each cell, so you know the height will be the same for each cell. If that works, then you will know it is the combination of stacks you have in each cell in your problem grid, and you may need to rethink the layout components.
Thanks @webdeer. Adding another row with just images does work fine so it must be something to do with using the Foundry Hover Image stack in conjunction with Adaptive Grid (and in conjunction with Chrome!).
As you using Foundry - Potion Pack Hover, you could try the Grid stack. I can send you some CSS code to remove the padding between Grid cells if you need it to achieve the same look.
I am sure I tried to use Grid initially but found it couldn’t do what I wanted. It might well have been due to padding between cells though I think there was something else. In fact, I use the custom classes in Adaptive Grid to only show the last 4 images in the grid when the user is viewing on a tablet or bigger. Don’t know that there would be an easy way to achieve that with Grid?
You might be able to use several grids with 4 cells per grid and hide the others on mobile. Or alternatively control the width on mobile so the width and consequently the height, doesn’t get so big. IMHO grids need lots of control below iPad size otherwise they can grow huge in length.
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.