# Question on Photo Gallery widget (Columns layout) **URL:** \ **Category:** General Questions\ **Tags:** photo-gallery\ **Created:** [October 18, 2024, 7:47am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468 "2024-10-18T07:47:03Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 18, 2024, 7:47am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/1 "2024-10-18T07:47:03Z")
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/](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! ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [October 18, 2024, 9:19am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/3 "2024-10-18T09:19:01Z")
Hi there, @Joey_J 👋 Sure! I’ve adjusted the image appearance with this CSS code: ```auto .eapp-photo-gallery-columns-item-image { object-fit: contain; } ``` Check your widget and let me know if you like the result 😉 ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 18, 2024, 9:24am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/4 "2024-10-18T09:24:12Z")
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! ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [October 18, 2024, 9:31am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/5 "2024-10-18T09:31:40Z")
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)](https://community.elfsight.com/t/october-challenge-create-slogan-for-elfsight-and-win-6-free-months-2-weeks-guaranteed/74883) We’ll be super happy to see you as a participant 😉 ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 18, 2024, 11:51am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/6 "2024-10-18T11:51:57Z")
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! ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [October 18, 2024, 12:42pm UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/7 "2024-10-18T12:42:21Z")
No problem! I’ve shared it with the devs and will get back to you once I have their response 🙂 ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 19, 2024, 6:30am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/8 "2024-10-19T06:30:20Z")
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;} ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 19, 2024, 8:00am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/9 "2024-10-19T08:00:50Z")
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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/c/8cabfc1949606b0403f578b362f46eb90097b85c.jpeg) ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 19, 2024, 8:22am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/10 "2024-10-19T08:22:58Z")
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;} ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 20, 2024, 3:08am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/11 "2024-10-20T03:08:50Z")
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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/e/3efded08dcaf19585141ba43b3b9dbed47fe773b.jpeg) ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [October 21, 2024, 1:59pm UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/12 "2024-10-21T13:59:22Z")
Hi there, @Joey_J 👋 To fix the issue, we’ve replaced your code with this one: ```auto .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 🙂 ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [October 22, 2024, 6:13am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/13 "2024-10-22T06:13:19Z")
Thank you for providing me with the solution. This perfectly works! 😍 I’m going to sign up with a plan shortly. Thanks! 😀 ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [October 22, 2024, 6:33am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/14 "2024-10-22T06:33:46Z")
Amazing, a huge thank you for your kind feedback! If anything else comes up, we are always here to help 😉 ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [October 25, 2024, 5:08pm UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/15 "2024-10-25T17:08:47Z")
A post was merged into an existing topic: [October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)](https://community.elfsight.com/t/october-challenge-create-slogan-for-elfsight-and-win-6-free-months-2-weeks-guaranteed/74883/43) ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [March 26, 2025, 12:47am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/16 "2025-03-26T00:47:28Z")
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; } ---
**Author:** ![Joey\_J](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/joey_j/32/10470_2.png) [@Joey\_J](https://community.elfsight.com/u/Joey_J)\ **Post date:** [March 26, 2025, 12:56am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/17 "2025-03-26T00:56:52Z")
Ah, sorry, again. Upon checking again, I see a new feature “Photo Aspect Ratio”! Chose “Original” and the problem is now fixed. 😀 I guess the CSS code is no longer needed. This is a very nice feature, thank you for introducing! ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [March 26, 2025, 11:17am UTC](https://community.elfsight.com/t/question-on-photo-gallery-widget-columns-layout/76468/18 "2025-03-26T11:17:13Z")
Hi there, @Joey_J 👋 Glad to hear you’re good now and that you like the new feature. Many thanks for sharing your feedback 😉 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 🙂 - [March Challenge: Share your results with Elfsight & win 3 FREE months!🚀](https://community.elfsight.com/t/march-challenge-share-your-results-with-elfsight-win-3-free-months/105950)