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!
Hi there, @Joey_J 
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 
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!
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
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!
No problem! I’ve shared it with the devs and will get back to you once I have their response 
Thank you! I was able to get a desired result by using 
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;}
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!
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;}
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!
Hi there, @Joey_J
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
Thank you for providing me with the solution. This perfectly works! 
I’m going to sign up with a plan shortly. Thanks! 
Amazing, a huge thank you for your kind feedback!
If anything else comes up, we are always here to help
A post was merged into an existing topic: October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)