I am trying to create a screen in my app that shows up to 40 groups in a 4-column-grid. (10x4)
There is a layout guide in docs: Customize mobile app style | Retool Docs
The problem is that, while on iPhone having 2 columns (so working with half cards) seems reasonable, on iPads the cards render insanely large - half a horizontal iPad screen is an immense size for such a card and height is through the roof.
First of all, is there a workaround to allow for smaller sizes than "half" or "full" card rendering?
Secondly, is there a way to limit element height manually? If there might be a workaround in custom CSS, is there best practice on what element to limit (e.g. the cardCollection or the container it is wrapped in)?
Thanks in advance to all of you guys for your help, I hope some other people might have come across these questions, too! 
Cheers
Hey @w7_gmbh,
Is the layout setup to be card collection view with horizontal or vertical scroll ?
You can adjust the height of card with aspect of the image but I guess this is not ideal.
We can also support scroll in custom collection view and it will unblock your use case 
1 Like
Hey @james.lee,
My preferred setup is vertical scroll. Horizontal would actually also be fine, however, even smaller horizontal layouts render huge on iPads.
I have limited design access through "half" cards and I can reduce image height by using the image ration, which helps to a certain extent. Anyway, for iPads there still are huge card elements.
The ideal would be some workaround for a 3- or 4- column grid with a cards "wrap" moving new ones to the next line. Hope this helps! 
Just adding to that: It'd make sense to allow for auto wrapping and more grid items since on smartphone horizontal users would run into the same issue. My component looks perfect, once I turn the phone 90 deg or switch to iPad I get this issue.
Hey @james.lee
Since I don't feel like there's a simple work around: Could you change the post topic to Feature requests?
1 Like