Gallery Reel Image Slider - How to fix cropped images

Hi,

Could you assist me in resolving the issue with the gallery reel slider? The images on the left and right are being cropped. Here's the link to the site: https://strongcontractors.com/

Thanks in advance!

Hi,

I see it already fine to me

Hi @tuanphan, thanks for the response. 

Seems like you're using a wide-resolution screen monitor, but on my 1080 screen, it's cropped on both sides. is there any code that can fit  images without cropping?

Here are the codes used:

// gallery reel image space //

section[data-section-id="66146c8a4e22237e86b4ba17"] .gallery-reel-item img {
  width: 100% !important;
  height: auto !important;
  transform: scale(.90);
}
// gallery reel center arrows on mobile //
@media screen and (max-width:767px) {
.gallery-reel-controls {
    justify-content: center !important;
}
}

Thanks

I see you removed Logos. Do you still need help?

Hi @tuanphan , Sorry for the late response. I'm new here and didn't notice your reply. Yes, I removed it because my client wanted to place it elsewhere, but now they want it back with the same UI design. Do you still have a solution for this? I really appreciate your help. Thanks.

On 5/30/2024 at 8:45 AM, evadRC said:

Hi @tuanphan , Sorry for the late response. I'm new here and didn't notice your reply. Yes, I removed it because my client wanted to place it elsewhere, but now they want it back with the same UI design. Do you still have a solution for this? I really appreciate your help. Thanks.

If you can add it back, I will test some CSS code.

It's back now https://strongcontractors.com/

The logo is cropped for some screen sizes. 

On 6/4/2024 at 2:56 AM, evadRC said:

It's back now https://strongcontractors.com/

The logo is cropped for some screen sizes. 

You mean images on left/right of reel cut off?

@tuanphan oh yes, that's what i mean. How can we prevent that from different screen sizes please? thanks.

On 6/6/2024 at 2:08 AM, evadRC said:

@tuanphan oh yes, that's what i mean. How can we prevent that from different screen sizes please? thanks.

You can use this code to Website > Website Tools > Custom CSS.

body {
    overflow-x: hidden;
}
.gallery-reel-list {
    overflow: Visible !important;
}