Overstretched single carousel slide on mobile

[Finkkleton]

Hello there,

The carousel panel on small screens is overstretching the bounds to the right of the viewport:

https://btwhole.sale/

Can you see what we have done wrong to enable this?

Kind Regards,

Spencer

[ruenel]

Hello Spencer,

Thanks for writing in! In your Row element “Global Container”, please set a maximum width of 100%. You may also need to do this in your Slider Container element.

Kindly let us know how it goes.

[Finkkleton]

Hi @ruenel,

Thanks for getting back to me.

I have set the slider to be the same width as the content above, but cannot work out how to conceal the forth slide to the right - there is a small piece showing. When I set the slide below 1415, the slides are squashed horizontally, so how do I hide that?

Kind Regards,

Spencer

[nabeel]

Hi Spencer,

I have added the following CSS code to the element CSS of the Slide Container and this has fixed the fourth slider visibility issue:

$el > .x-slide-container-content {
  overflow: hidden;
}

Hope this helps!

[Finkkleton]

Hi @nabeel,

Thanks for getting back to me. Overflow:hidden cuts off the shadows, which is why I didn’t use it - is there a way of retaining the shadows?

Cheers!

Spencer

[ruenel]

Hello Spencer,

Please remove the custom CSS previously given. I have checked your site on my browser and I do not see any overflow.

If ever you set a maximum width of 1415 pixels, make sure that you will set it to 100% on mobile.

Best Regards.

[Finkkleton]

Hi @ruenel,

Thanks for getting back to me. I have tried this but it seems to have made things even worse - I’m not sure what I am doing wrong.

Any direction would be great, thank you.

Kind Regards,

Spencer

[christian]

Hey Spencer,

In your current setup:

1. Move the Slide Navigation outside of the Content Wrapper but with in the Slider Inline

2. Enable the Global Container in the Content Wrapper or set the Content Wrapper Max Width to 1300px (1400px would show the 4th slide) and importantly, set the Margins to auto to center the Content Wrapper.

Check the expected result in the secure note.

[Finkkleton]

Hi @christian,

Thanks for getting back to me.

That works perfectly - I had to adjust some padding and the width a bit to stop the shadows being cut off.

How do I alter the width of the navigation AND centre it? It is absolutely positioned so moves left when I add a width of 1400px.

Cheers!

Spencer

[ruenel]

Hello Spencer,

In Slide Navigation element, set the maximum width to 1400 pixels;

And then set the left and right margin to auto:

Kindly let us know how it goes.