Change Grid to 3 Columns Max

Hello!

Is it possible to make the team showcase a maximum of 3 columns wide? I’ve attached a photo of what the widget currently looks like at full screen where it looks like it’s 4 columns wide.

Hi there, @Lily_Gamble1 :waving_hand:

Sure, please add the code below to the Custom CSS field on the Style tab of your widget’s settings and you’ll be fine:

.eapp-team-showcase-grid-component .eapp-team-showcase-grid-item {
  width: 33% !important;
}

This code will change the width of the member cards as well, since the widget is set to full width. If you’d like to keep the current card width, please disable the Full Width option:

Hey Max! I tried using this code again and it doesn’t seem to be working for me. Could it need updating?

Hi @Lily_Gamble, Max is on a much deserved vacation now, but let’s see if we can get you some assistance. The percentage in the script, the width (or full width) setting, and the size of your pictures all interact. I just tried it and it works at 30% with the default images used in the widget.

Try tweaking the percentage and width settings to see if you can get it displaying the way you want. If you get the three columns but the title is off center, that can also be adjusted with CSS. If none of this works out for you, let’s flag @Irene. Just remember that this is a weekend, so it’ll probably be Monday before a staff member can get back to you. GL!

Hi Lily! This is Tony stepping in while Max is away.

Bob is right - the result can depend on the width percentage and the current widget layout. I’ve checked it on my side, and changing 33% to 32% should give you the desired 3 column layout:

.eapp-team-showcase-grid-component .eapp-team-showcase-grid-item {
  width: 32% !important;
}

You can also adjust the percentage slightly if needed to find the best fit for your layout. Give it a try and let me know how it looks on your side :slight_smile: