Option to adjust number of columns on grid

Wishlist Team Showcase
1

Option to adjust number of columns on grid

2

Folks, our former Wishlist portal, where our users shared their requests and suggestions, was transferred to this forum. You’re most welcome to vote, add new ideas, and leave your comments here — we surely will consider them all! :star_struck:

Original Votes: 2

3

I would add to this request by allowing any odd grid items where 1 or 2 cannot fit on the line specifically to be centered rather than just off to the one side… It feels uneven when you have 3 on one line 1 or 2 on the bottom but an open space next to it.

2 Likes
4

I too request to have smaller “squares” for each employee just to get 5 in a column.

1 Like
5

Hello friends, @KeyframeKreations, @user3708 :waving_hand:

Thank you for your feedback!

Just in case, I’d like to note that you can change the number of cards displayed by changing the width value in the settings:

image
image330Ă—411 15.1 KB


If you’d like to keep your widget width and make the member cards smaller, you can do this using a code in the Custom CSS field on the Style tab of your widget’s settings. :slightly_smiling_face:

3 cards in a row on desktop:

@media (min-width: 500px) {
.eapp-team-showcase-grid-item {
width: 30% !important;
}
}

5 cards in a row on desktop

@media (min-width: 500px) {
.eapp-team-showcase-grid-item {
width: 20% !important;
}
}

Unfortunately it’s impossible to display more than 2 members per row on mobile in a neat way. If 2 members option works for you, feel free to use this CSS code for the mobile version:

.eapp-team-showcase-grid-item {
  max-width: 25%;
}

.eapp-team-showcase-member-card-info-component {
  max-width: 100%;
}

@media (max-width: 700px) {
  .eapp-team-showcase-grid-item {
    max-width: 50%;
  }
}
6

Hi Max, thanks- it looked great on the web, but it looked terrible on mobile. Suggestions!

5d445fdd.jpg826Ă—1318 145 KB

1 Like
7

Hi there, @user3708 :waving_hand:

Apologies for the inconvenience!

You’re right, unfortunately it’s impossible to display more than 2 members per row on mobile in a neat way. If 2 members option works for you, feel free to use this CSS code for the mobile version:

.eapp-team-showcase-grid-item {
  max-width: 25%;
}

.eapp-team-showcase-member-card-info-component {
  max-width: 100%;
}

@media (max-width: 700px) {
  .eapp-team-showcase-grid-item {
    max-width: 50%;
  }
}

And here is the adjusted code to display 5 members per row on desktop only:

@media (min-width: 500px) {
.eapp-team-showcase-grid-item {
width: 20% !important;
}
}
1 Like