Slider height and width

[Mike_Berro1 (Mike Berro)]

Does anyone know how to have the slides auto resize and contain so they dont crop on desktop? There is also a ton of empty space

[Max]

Hi there, @Mike_Berro1 and welcome to the Community

I’ve just checked your website and see that the images are not being cropped and there is no top and bottom spacing like in your screenshot:

Could you please confirm if everything is fine on your end now?

[Mike_Berro1 (Mike Berro)]

Thats on my test page. Please visit the home page.

[Max]

Got it, thanks!

We’ve added this CSS code to your widget to remove top and bottom paddings:

.eapp-slider-slide-slide {
  height: 900px;
}

.es-widget-background-container {
  min-height: unset !important;
}

@media (max-width: 1800px) {
  .eapp-slider-slide-slide {
    height: 600px;
  }
}

@media (max-width: 1100px) {
  .eapp-slider-slide-slide {
    height: 500px;
  }
}

@media (max-width: 800px) {
  .eapp-slider-slide-slide {
    height: 300px;
  }
}

Please check it out and let me know if you like the result

[Mike_Berro1 (Mike Berro)]

Hello. When the browser resizes, it hugs to center, How can i have it stay hugged to the top of the page? See attached for all extra space.

[Mike_Berro1 (Mike Berro)]

Hello. please see this loom link. the first site is how the slider should respond. then you can see how mine is broken. LOOM

[Mike_Berro1 (Mike Berro)]

this is for my HERO slider

[Max]

Got it, thanks for sharing the details!

I’ve passed your request on to the devs and will update you once it’s fixed

[Max]

Hi there, @Mike_Berro1

Thank you for waiting!

We’ve fixed removed the spacing when resizing the browser window with this code added to the Custom CSS field:

.eapp-slider-slider-outer {
  --slide-height: 900px 
}
  
.eapp-slider-slide-slide {
  height: var(--slide-height);
}

And this script was placed in the Custom JS field on the Settings tab of your widget’s settings:

const waitForElement = (selector, root = document) => new Promise(res => {
  const observer = new MutationObserver(() => {
    const element = root.querySelector(selector);
    if (element) {
      res(element);
      observer.disconnect();
    }
  });

  observer.observe(root, {
    childList: true,
    subtree: true
  });
});

waitForElement('.eapp-slider-slider-outer').then(sliderOuter => {
  const changeSlideHieight = () => {
    const width = window.innerWidth;
    const newSlideHeight = Math.floor(width / 3);
    sliderOuter.style.setProperty('--slide-height', `${newSlideHeight}px`);
  };
  
  changeSlideHieight();
  window.addEventListener('resize', () => {
    changeSlideHieight();
  });
});

Please check your website and let me know if you like the result

[Mike_Berro1 (Mike Berro)]

hello. my preview on elfsight shows full width, but its not actuallt full wdith.

[Mike_Berro1 (Mike Berro)]

i fixed it. the slides were 130 height, i changed to 150 and it worked. i just want to know how to make it max fit with rounded corners.

[Max]

Hi there, @Mike_Berro1

You can set the widget corner radius right in the settings:

As for the full-width option on mobile, please try to use this CSS code and let me know if it helped

@media (max-width: 768px) {
	.global-styles,
	[class*='zpsection']:has(.elfsight-app-6aa9d12e-ced5-4a33-ba0c-326408875a07),
  [class*='zpcontainer']:has(.elfsight-app-6aa9d12e-ced5-4a33-ba0c-326408875a07) {
	  padding-inline: 0 !important;
  }
}

[Mike_Berro1 (Mike Berro)]

Didnt work. The preview on my elfsight editor is different then my actual site.

My site is https://www.hookah.today/ (mobile)

IE Height on Mobile 127PX shows rounded corners on editors but my live site isnt full width or rounded.

[Max]

I’ve checked your widget and there was no CSS code added there. I’ve just pasted it to your widget and the slider became full-width on mobile, but the rounded corners still don’t show up.

Our devs will adjust the code, and I’ll update you once it’s done

[Max]

We’ve adjusted the appearance of the mobile view using this CSS code:

@media screen and (max-width: 768px) {
  .eapp-slider-slider-slider,
  .es-widget-background-wrapper {
    width: 100% !important;
    aspect-ratio: 430 / 143 !important;
    height: auto !important;
    min-height: unset;
  }
}

  .global-styles,
  [data-element-id="elm_szTQ9DdwYsKFZ_qhdO9qhg"] {
    padding: 0 15px !important;
  }

Please check it out and let me know if you like the result