I have a page list displayed with thumbnail grid. Initially, I had twelve pages and the grid had four rows, each with three thumbnails.
I have added a thirteenth page, but now the thumbnails don’t line up. There are now three rows of three, one row with one single thumbnail to the right, and a third line of three.
I would like the rows of the three to continue, with the last thumbnail on the last row, to the left.
The problem is visible here:
Thanks in advance if you van help me sort this out!
In the last row before it breaks, the description is longer for the first two entries than it is for the last one. This causes the left float to “not work”. If you look at it on desktop and bring it down to mobile width, you’ll see at another point it gets stuck under the first entry in that row.
Two solutions I’ve used in the past is to truncate the descriptions to the length of the shortest description in the list, or to create a custom template to include a class=“clear” between each row to alleviate this issue and still allow variable length descriptions.
Thanks so much for your help! Truncating the descriptions has worked for now - much appreciated!