Hi there, wondering if I can get some thoughts on how to achieve what I am trying to do; I thought this would be fairly simple, but it’s proving to be trickier than I initially thought.
On this test page Testing Grid options for collection output I have 3 examples of what I am trying to achieve - a grid of images that will act as links to inner pages. The top example works but is static content and the bottom uses the CSS Grid tool (we want to drop this), the middle example is being managed by a collection; the collection output version is the one we want to use and are having problems with.
The issue is that each item in the collection can use a landscape image or a square image, so the collection item needs to be 50vw or 25vw (or 50% or 25% of the page). The output does a check to see which image is being used and delivers the 50vw or 25vw output inside the collection item. This all works fine and looks perfect in Webflow, the problem is that the published page is having issues with the layout, which I suspect is related to ‘view width’ and not percentages. Testing Grid options for collection output
If I can get the collection item to know which width dimension it should use, as in 50% or 25% of the page width 100%, instead of view width, this would work. Is there a way to get the collection item to be assigned 50% or 25% width based on which image is being used? I can’t work it out.
Hopefully the attached screenshot will help explain tings clearer.
Cheers for any thoughts on this.
Grant
Here’s the site: Webflow - Brand Counsel