Help using typography column in collection list

Design help General
1

Hi, I am getting an unexpected behaviour when using typography columns within a collection list to display images in as a masonry grid. On the page are two collection lists, the first displays a collection of images that work ok in the designer and preview but break when viewed in a live browser. The second collection list (grey background) is similar except I have put the images inside a ‘card’, the grid clips in both the designer and live version on chrome.

Any ideas where I am going wrong?

Many thanks,
John.

Here is my site Read-Only: https://preview.webflow.com/preview/johns-fantabulous-project-c95aa6?utm_medium=preview_link&utm_source=dashboard&utm_content=johns-fantabulous-project-c95aa6&preview=0f658000cdcb2936ba486f3675616cb3&mode=preview
(how to share your site Read-Only link)

2

HI @johnminshall

So all you need to do is the following:

  1. Collection List Wrapper - set to Layout Display “Block”; Position “Static”
  2. Collection List - set to set to Layout Display “Block”; Position “Relative”
  3. Collection Item - set to Layout Display “Inline-Block”; Position “Static”
  4. Collection Item Card - set to Layout Display “Block”; Position “Static”
  5. Gallery Images - set to Layout Display “Inline-Block”; Position “Static”
  6. Card-wrapper - set to Layout Display “Block”; Position “Static”

This should make it work how you like.

Enjoy!

3

Thank you, your suggestion has partially fixed the issue but I am still having issues on the live site in chrome with janky irregular column gaps and where some of the image elements aren’t filling 100% width. There is also a weird box-shadow that is appearing at the bottom of the collection list in the grey section.

I know this method is kind of a hack but is it a hack too far in this case?

Many thanks,
John
Preview

4

The double box shadow in the first two columns can be remedied by the following:

  1. Card-wrapper - set to Layout Display “Inline-Block”; Position “Static”

as for “some of the image elements aren’t filling 100% width” I am not sure what you are talking about… for me it looks just fine

22%20AM
22%20AM2052×781 268 KB

5

Thanks again for your response. It was the collection-item-card that I needed to set to display inline to fix the shadows. Couldn’t have done it without your help.
regarding the uneven column gap, it must be my browser as this is what I see:

2019-09-17
2019-09-171920×1200 435 KB

Thanks again for all your help.
John.

1 Like
6

try to publish and have a look via incognito mode - see if it changes…

7

No change in incognito unfortunately.

Many thanks,
John.

8

can you send me a link to your published page - I want to see if I can replicate the issue

9

Link to published page

Appreciate your help with this. This is a feature that I would like to use in the future so would be good to know how to fix it, however, these are just ideas im messing around with so don’t go out of your way.

Cheers,
john.

10

try to clear all cookies and history and close and open the browser… i just tested it in Chrome and it works well…

Also try to achieve the space between the items by giving each collection item margin-right and margin left and remove the column width setting. Also st Collection Item Overflow to “hidden”.

let me know if it helped!

11

I managed to fix it, if your interested link is below. In the end it was along the lines of what you said - I removed the column gap and replacing it by adding a div within the collection item that contained the image element and giving a padding to this (acting as fake margin)
I then had to add negative margin to the collection list to put it back in line with the container box. All works good now, not sure if I will ever use it but still.

Again many thanks for putting me on the right track.
John.

Lots of cats

12

No problem, i have mucked around with the masonry gallery for a long long time… here is an example of what i did… I wanted to make for my portfolio and it took me a while to settle on the “text column” method - after I have tried various custom code options… this seemed to be the easiest (also since it is native)… my only problem - which still remains unsolved, is the CMS limit of 100items per collection

1 Like