Question on Photo Gallery widget (Columns layout)

Ask the Community General Questions
1

As for Photo Gallery widget, I quite like “columns” layout, but the each photo is cut off on right and left. I think this is intentional, but is there any way to fit the photos perfectly (without cutting off right and left)?

Link: https://837c81216dc3434182fdfca64acbed87.elf.site/ In the originally-uploaded photos, the width is wider (you can see the watermark cut off at the bottom left).

Thank you in advance for your advice!

3 Likes
3

Hi there, @Joey_J :wave:

Sure! I’ve adjusted the image appearance with this CSS code:

.eapp-photo-gallery-columns-item-image {
  object-fit: contain;
}

Check your widget and let me know if you like the result :wink:

3 Likes
4

Ohh, this is great, thank you for your help! I’ll test further, but very likely I’ll sign up with the paid plan, thank you!

3 Likes
5

Awesome, you are welcome!

By the way, we’ve just launched a new challenge, where you can win a 6-month extension to any of your subscriptions.

Also, you’ll be able to apply this bonus to a new subscription - a great chance to test the Photo Gallery for 6 months absolutely for free!

Check the details and join in - October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)

We’ll be super happy to see you as a participant :wink:

2 Likes
6

By the way, just encountered one problem. There are relatively tall spaces/paddings added at the top and bottom of the gallery. Possible to remove these to 0 (zero)?

Thank you for letting me know about the challenge. I’ll join for sure!

2 Likes
7

No problem! I’ve shared it with the devs and will get back to you once I have their response :slightly_smiling_face:

2 Likes
8

Thank you! I was able to get a desired result by using :arrow_down: c, but if there is a better solution (because it’s not so appropriate to use minus values for positioning the gallery), please do let me know, thank you!

.eapp-photo-gallery-photo-gallery-component {margin-top: -60px; margin-bottom: -110px;}

1 Like
9

Sorry, again. Just found a flaw… The empty spaces above and below photos are somehow clickable. Possible to fix this? After using the minus value (margin-bottom: -60px and margin-bottom: -110px) to reduce the space above and below the gallery, I included some texts on my website (as seen in the screenshot), but those texts are still clickable. Thank you in advance for having a look at it!

screenshot
screenshot1280×710 197 KB

1 Like
10

Sorry, so many times. Looks like the CSS below did the trick! So, in the meantime, I have no further issue, thank you!

.eapp-photo-gallery-columns-main,
[class*=‘CarouselItem__CarouselItemContainer-sc’] div {height: auto !important;}

1 Like
11

Sorry, there’s another issue with the code above. When the page is loaded the first time (Ctrl + F5 or after clearing the browser cache), the gallery appears like this very thin (it’ll show properly only if the page is refreshed). Is there any solution for this? Thank you in advance!

screenshot
screenshot1000×229 32.8 KB

2 Likes
12

Hi there, @Joey_J :wave:

To fix the issue, we’ve replaced your code with this one:

.eapp-photo-gallery-columns-item-image {
  object-fit: contain;
}

.eapp-photo-gallery-item-data-imageContainer:first-child:hover {
  filter: brightness(75%); 
  -webkit-filter: brightness(75%); 
  -moz-filter: brightness(75%); 
  transition: all 0.5s ease-in-out; 
  -moz-transition: all 0.3s ease-in-out; 
  -ms-transition: all 0.3s ease-in-out; 
  -o-transition: all 0.3s ease-in-out; 
  -webkit-transition: all 0.3s ease-in-out;
}

[class*="CarouselItem__CarouselItemContainer-sc"] > div {
  height: auto !important;
  aspect-ratio: 360/541;
}

.swiper-wrapper,
.eapp-photo-gallery-columns-main {
  height: fit-content !important;
}

Check it out and let me know if it’s fine now :slightly_smiling_face:

2 Likes
13

Thank you for providing me with the solution. This perfectly works! :heart_eyes: I’m going to sign up with a plan shortly. Thanks! :grinning:

3 Likes
14

Amazing, a huge thank you for your kind feedback!

If anything else comes up, we are always here to help :wink:

2 Likes
15

A post was merged into an existing topic: October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)

16

Hi @Max, the code below (suggested by you previously) has suddenly stopped working (now photos aren’t fit proportinally). Any CSS class name has been changed or something? Pls help check, thank you in advance.

.eapp-photo-gallery-columns-item-image {
object-fit: contain;
}

[class*=“CarouselItem__CarouselItemContainer-sc”] > div {
height: auto !important;
aspect-ratio: 418/541;
}

.swiper-wrapper,
.es-carousel-layout-wrapper {
height: fit-content !important;
}

1 Like
17

Ah, sorry, again. Upon checking again, I see a new feature “Photo Aspect Ratio”! Chose “Original” and the problem is now fixed. :grinning: I guess the CSS code is no longer needed. This is a very nice feature, thank you for introducing!

3 Likes
18

Hi there, @Joey_J :wave:

Glad to hear you’re good now and that you like the new feature. Many thanks for sharing your feedback :wink:

In the meantime, we’d like to invite you to join our new challenge, where you can win 3 FREE months for your subscription.

The challenge is going to be closed tomorrow, so don’t miss your chance to participate and win :slightly_smiling_face: - March Challenge: Share your results with Elfsight & win 3 FREE months!:rocket:

2 Likes