[Resolved] Homepage slider shrinks to small size when browser zoom out

Yep, I understand but I already asked and they said I should check with the theme because the same shortcode works fine inside a page.

But ok, no problem I’ll further investigate with them.

Hi Ying and thanks for your feedback.
I thought I already included the site’s URL in my initial post but I’m adding them here again.

The issue has been solved by the support of Smart Slider 3 (free version) and I include the feedback I got from them in case someone else is interested in the future.

I’m not sure I understand everything myself and not yet sure whether this finally relates to the theme or the plugin – or both…

This site is using this CSS snippet, according to support I got here that relates to the slider’s option “force full width” and allows keeping everything contained for large screens:

@media(min-width: 1401px) {
  .page-hero {
    height: 467px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }

  body.home .page-hero {
    height: 700px;
  }
}

So, their support first noted this:

“I checked the linked page and the problem is connected to the width of the container where you have the slider published.
Actually if I check the page in Google Chrome, then I can see this problem occur even without any zooming, as your container will be already too narrow – see screenshot here.

Making the container have 100% width could make it become as wide as its parent, and the slider could scale that way properly, too.
This custom CSS might solve your problem:”

div.inside-page-hero{
   width:100%;
}

This indeed solved the problem but I then asked more details about this issue and they replied this:

“The “force fullwidth” option can be found at the Size tab -> Fullwidth layout:
https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size
->
https://smartslider.helpscoutdocs.com/article/1776-fullwidth-layout
but this option will make your slider as wide as the browser screen is. In your case currently your slider is centered within a 1400px maximum wide container, so I don’t suggest using “force fullwidth” if you want to keep your current layout.

The code we suggested is necessary, because the place where you inserted our slider doesn’t have a “width” CSS code. When “width” is not set, the browser will use “auto” to decide how wide this element should be, which means, that it will be as wide as the element inside it. Our slider’s width is based on the container, so our slider tries to be as wide as the container is, while the container tries to be as wide as the slider is, and this causes the problem. As both are looking at each other, a wrong result appears, but with a specified width, this won’t happen.”

So, here we are. It works but I still don’t really know what was wrong…

Good to know, many thanks!