I am trying to alter the width of the columns in my repeating group conditional upon the width of the page. Unfortunately, the option to change the width of the column in a repeating group isnt available conditionally.
Looking through other discussions on this, it appears I can do this with custom CSS combined with the Classify plugin. But most discussions seem to assume the user is pretty knowledgeable about how CSS works so I can’t seem to fit all the pieces together.
Can anyone walk me through the whole process of how this will work?
I want to put in place a rule that when the Current Page Width < 600px that it will change the Min Width of Column in my repeating group to 300 px.
Do I need to use the Classify Plugin?
If so, what do I put in the ID Attribute of my Repeating Group?
What is the code I need to add into an HTML element to make it happen?
I got it working for what I want. I was trying to ensure that as the screen size changed that the column width and # of columns in the repeating group changed as I wanted them to. The real struggle was when i got down to mobile size I actually wanted the column width to increase instead of decrease as the previous changes had.
Using a combination of the correct starting Min Column Width and conditionally changing the Repeating Group’s overall width and the width of the Group I put in the column, I was able to make it happen.
Hi @rpetribu
I am trying to do what you’re talking about but it doesn’t seem to work (unless I’m doing something wrong).
I have my column min width set to 120:
The min width of the group doesn’t seem to affect the width of the column.
I feel like I might be doing something stupid here but I’ve been playing around a bunch and can’t seem to get the effect you’re talking about.
Any help would be much appreciated.
Thanks,
Paul
This is happening because the column width of your repeating group (120 px), in some moment, gets smaller then the width of the group that is inside it (150 px). In other words… your repeating group keep shrinking while the width of the group inside it don’t. So they will overlap each other.
But, as per your original suggestion in this thread, I have set the minimum width of the group inside. If I make the min width of the column greater than or equal to the min width of the group, then the min width of the group becomes irrelevant, no?
Just noticed a new option here which does the trick!
Wrapped horizontally
Select this option if you’d like the items in your repeating group to wrap to a new row if the number of items takes up more space than the parent container allows. Use this setting if you’d like to create a “tag” like list where columns fit width to their content and do not need to be evenly sized.
