Issue changing collection item's width using interactions

Hey everyone,

I have finally been working on a portfolio website, and I have run into an issue when I apply an interaction to a collection item’s width. Here is my read-only link and here is the live staging site. This is how the website looks at the moment:

The site is in the early stages, but the idea is to have 3 layout viewing options for the user in the top right:

image

When someone clicks one of these different layout options, I would like to change the width of the collection items below. Each one of these cards is a collection item:

I also have the container that the collection items are in set to flex horizontal with the children wrapped:

So basically if the children (the collection items) are set to 33.333%, then each row will show 3 collection items. If I change the collection item’s width to 50%, then the row would only display 2 of the collection items.

This works great when changing the element’s width, as you can see below:

https://www.loom.com/share/c5dc18f26f3947b5ada5539402b6104c

However, if I change the width using interactions, everything turns kids on Christmas morning crazy. As you can also see below:

https://www.loom.com/share/c60a93dfc2cd42d28daab10ea274336e

I want users to be able to click the layout icons in the top to display the collection items as 3 columns, 2 columns, and 1 column. If anyone has any ideas on how to accomplish this, I would really appreciate the help.

Thanks!

The height isn’t updating when you change the width in the Size Action.

Set the height to Auto in both Size Timed Actions (Initial state and the other one) and the height will behave as you expect it to.

:joy:

1 Like

@vincent Thank you so much for the help man! Can’t believe I overlooked that, but I could have spent a week looking at this issue and probably never thought to change this. Thank you again!

PS - any chance you might have a solution to this one too haha