Help with minimizing Slider outer boundaries

[Solo_Leafs]

Hello I was looking for a resolution to my carousel slider issue when I came across some responses to a similar issue, however i’m not sure their situation is the same as mine. I have created a carousel slider that I want to appear the same (full screen width) on both desktop and mobile. Currently both versions have alot of extra space in the outside boundaries of the slider. I want minimal space between the edges of the page and also the top and bottom outer margins. Could anyone help with this issue?

Solo Leafs

[Max]

Hi there, @Solo_Leafs and welcome to the Community

I guess you’ve read the threads about the paddings appearing because of the Fluid Engine. Your use case is absolutely the same.

We have a special article dedicated to this issue - Why my widget has an extra padding on my Squarespace website.

Pleasef ollow the steps described in this article and you will successfully get rid of that extra padding!

Try it out and let me know if it helped

[Solo_Leafs]

It fixed the bottom boundaries for desktop but not the top and it didn’t fix any of the boundaries on mobile.

It also messed up my homepage button format, can we please fix this?

[Max]

Got it, thanks!

Could you please specify what exactly changed in the button format on the homepage? I’ll gladly check it with the devs

[Solo_Leafs]

Here is what the site should look like on desktop, this is without the slider + coding

[Solo_Leafs]

Here is what the site should look like on mobile, this is without the slider + coding

[Solo_Leafs]

Here is what the site looks like on desktop and mobile, this is with the slider + coding

[Solo_Leafs]

[Max]

Thank you!

I’ve passed it on to the devs and will update you once I have their response

[Solo_Leafs]

Ok I would like to put this slider on every page so I would like to make sure this will work for every page on both desktop and mobile without messing the button format up.

[Solo_Leafs]

Hello Max, is there any update?

[Solo_Leafs]

Has there been any update?

[Max]

Hi there, @Solo_Leafs

I am so sorry for the delayed response!

We’ve removed extra paddings by adding this code to the Custom CSS field on the Settings tab of your widget’s settings:

@media(max-width: 600px) {
  .global-styles,
  .content-wrapper:has(.elfsight-app-cd0d2cb4-fe3f-4a23-9cd3-e378da2dc9cd) {
    padding-top: 0 !important;
  }
  
  .global-styles,
  .page-section:has(.elfsight-app-cd0d2cb4-fe3f-4a23-9cd3-e378da2dc9cd) {
    margin-top: 20px;
    min-height: unset !important;
  }
}

[class*='WidgetBackground__Content-sc'] {
  padding: 0 !important;
}

To fix the issue with the button display, please replace the code you’ve got in this article (screenshot) with the script below:

<style>
  .disable_fluid_engine {
    grid-template-rows: unset !important;
  }
</style>
<script>
  window.addEventListener('load', () => {
    document.querySelector(".elfsight-app-cd0d2cb4-fe3f-4a23-9cd3-e378da2dc9cd")?.closest(".fluid-engine")?.classList.add("disable_fluid_engine");
  });
</script>
<!-- Elfsight Slider | Untitled Slider -->
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<div class="elfsight-app-cd0d2cb4-fe3f-4a23-9cd3-e378da2dc9cd" data-elfsight-app-lazy></div>

Try it out and let me know if it helped

[Solo_Leafs]

Thank you Max that worked! Is there a way to place the carousel slide bubbles right below the carousel instead of inside the bottom part of the carousel? Also what about the arrows on the outside as well?

[Max]

Sure! I’ve forwarded your request to the devs and will get back to you tomorrow

[Max]

We’ve saved this code in the Custom CSS field on the Settings tab of your widget’s settings, but haven’t published it on your website:

.eapp-slider-arrows-container,
.eapp-slider-pagination {
 top: unset !important;
 bottom: 0 !important;
 transform: translateY(100%) !important;
}

.eapp-slider-pagination {
 transform: translate(-50%, 100%) !important;
}

.eapp-slider-combined-navigation,
.eapp-slider-slider-slider {
 overflow: visible !important;
}

If you like how it looks in the widget editor, just publish changes and you’ll be fine

[Solo_Leafs]

I like the position of the carousel bubbles now but I prefer the arrow buttons to be back on the sides. Also is it possible to make the button do a hover color change? if you need an example please check the carousel slider on my other site SoloLeafsShop.com, this is a BigCommerce integrated carousel slider but the button will turn red with black outline when hovered over. I would like this same effect please.
Thank you Max

[Solo_Leafs]

There is also a thin black line under the announcement bar that is preventing the black header transition from the background video when you scroll down to appear smooth on mobile, if we can please edit this in the code because it doesn’t happen when this code isn’t active for the slider. There is also a very thin strip on the side of the slider that is from another overlapping slide, this appears on mobile as well. Can we please fix all these issues?
Thank you Max

[Solo_Leafs]

I actually edited the site a little to adjust for the bottom arrow height from the next section below and I actually like the way it looks now so we can keep this friend, no edits necessary for this part. I just need that black line I specified earlier removed, that’s the only edit for the moment.
Thank you Max

[Max]

Hi @Solo_Leafs

1. If you’d like to get the navigation arrows back on the sides, please remove this code from the Custom CSS field:

2. As for changing the button color on hover, did you mean the slider navigation arrows?

3. Regarding the black line under the bar on mobile, could you please provide me with a screenshot of what you mean?