Hi everyone,
I have a CMS collection being displayed in a grid, but the first item goes halfway out of the grid for an unknown reason to me. All items have same classes and attributes.
I tried reversing the order of the CMS items (to see if it’s a first-grid issue) and indeed the same item was last and in the same weird position.
Demonstration: https://integra-university.webflow.io/courses
Hi @trynix, thanks for your post!
I took a look and it seems that on the one item where is showing off the grid, the issue is that the other elements in the list have images that are at least 352px tall, however on the first item, that is only 113px tall.
I would maybe suggest to give your card image a min height of 352px and see how that works, or upload a different image that is same size as the other items in the courses collection:
I hope this helps!
Thank you very much!! That indeed was the issue 
in terms of cards like that, which have a position:absolute overal with text (that needs to scale with card as window/screen size changes) - are there any best practices to bear in mind? I’m thinking of using clamp to adjust text sizing, or just start off with much smaller text.
Hi @trynix, you can probably ask 5 people and get 5 different answers on what people like to do with their designs. I like this kind of approach myself: Viewport Sized Typography | CSS-Tricks - CSS-Tricks
There even more advanced methods available if you search on google.
Usually you can apply the principles in Weblfow, but in some scenarios other styles may affect the overall layout. Testing in preview and on the published sites help during the whole design process.