Image Size within Popup window on team showcase

Ask the Community Customization
1

Hi all! I’m looking to keep my images in their same square ratio when they open in the popup window. Is there a way to resize the popup so the image is in a square format (not zoomed in) and the text portion resizes accordingly with it on when the scroll begins?

2 Likes
3

Hi there, @user16011 :waving_hand:

I see that you’ve already applied a CSS code:

.global-styles,
.eapp-team-showcase-popup-item-container .eapp-team-showcase-member-card-photo-photoShow {
  background: #fff;
  object-fit: contain;
}

Does it cover your needs or you’d like to move the image lower (to the bottom of the popup)?

1 Like
4

We would like to have the image align to the bottom! Thank you so much. @Max

2 Likes
5

Got it, thanks!

In this case, the empty spacy will appear at the top. If it’s fine for you, you just need to add this line to your code:

 object-position: bottom;

Let me know if it helps or if you have any questions left :slightly_smiling_face:

6

Thanks @Max ! It looks better than before, but does feel like too much space now at the top. Is it possible to keep the image square and then reduce the size of the entire popup so it fits the square image? That way there isn’t extra white space at the top or bottom.

1 Like
7

Please let me check it with the dev team. I’ll update you once I have their response :slightly_smiling_face:

8

Hi there, @user16011 :waving_hand:

We’ve adjusted the CSS code in your widget:

@external {
  @media (min-width: 480px) {
    .eapp-team-showcase-popup-item-container .eapp-team-showcase-member-card-photo-photoShow {
      object-fit: contain;
      object-position: bottom;
    }

    .eapp-team-showcase-popup-item-infoContainer {
      max-height: 480px !important;
    }
  }
}

Please check it out and let me know if you like the result :slightly_smiling_face:

9

Fantastic! Thank you so much! @Max

1 Like
10

No sweat!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 3-month extension for your subscription - April Contest: What’s Your Top Widget Feature? Tell us and win 3 MONTHS FREE!:wrapped_gift:

Check the details and join in :wink: