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:
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:
However, if I change the width using interactions, everything turns kids on Christmas morning crazy. As you can also see below:
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.