Based on the layout of the slider: https://smartslider.helpscoutdocs.com/article/2033-what-affects-slider-size#layout
by default you can either adjust the slider to its container element (with Boxed layout) or make it as wide as the browser is (with Fullwidth layout).
Currently you have our slider within an Elementor column, that has 1140px maximum width. I think Elementor should have an option for you to remove this maximum width limitation from there. If you can, I suggest doing that, as from your image that “Wir stellen ein:” text is not created by our slider, but it is just an Elementor text, and that has the same issue. So there you can only resolve the problem from Elementor’s end.
And if you would be able to remove this maximum width limitation, you could use Boxed layout for our slider.
If you cannot find that maximum width in Elementor, there is an alternative for the slider you could use. At Fullwidth layout: https://smartslider.helpscoutdocs.com/article/2033-what-affects-slider-size#fullwidth
there is an “Adjust slider width to” field, where you can write any HTML element’s selector from your website, that is a parent element of our slider. With this, the slider will adjust to that element instead of the browser. In your case you could write: .elementor-section
there, and that should make your slider have the width you are looking for.
Thanks for your fast response. I am a layperson and as such my options are limited but I am sure that I don’t have to employ a developer just for such a small issue so I am not giving up so fast ?? I have tried any possible combination of “boxed” or “unlimited” width with Elementor or your plugin settings but I end up always with two options:
1) The slider is full width of display, so the left arrow is hidden and the text is not centered
2) The slider is a lot smaller than intended and displays unwanted spacing left and right
I also set a width manually but then it only shrinks the text width but not the slider with the left arrow…
Oh, Thanks so much, you’re the best! I was trying to find a solution since yesterday so I am glad it is finally solved ??
There is now just one issue left: The header/title is ugly in mobile as it is cut off on the right. Can you please tell me how I can also make the header/title mobile friendly just like the smaller text is already responsive?
And can you please tell me how I can remove the wide spacing below the slider? There is just too much but I tried with negative padding top or bottom but it doesn’t reduce the gap bewteen the slider and the content below ??
About the texts:
The problem with the “Lagermitarbeiter/Lagerhelfer in Teilzeit (m/w/d)” text is, that “Lagermitarbeiter/Lagerhelfer” is from html’s end is one long word and that is why it won’t break.
The options you have:
1. Consider adding space character next to the / sign:
Lagermitarbeiter / Lagerhelfer in Teilzeit (m/w/d)
2. At the layer’s style: https://smartslider.helpscoutdocs.com/article/1812-layer-style#style
click on “more” at the font settings. There you could write this CSS code:
word-wrap:break-word;
It would let your word break its characters too, not just whole words.
The next suggestions will be useful for your other texts too:
3. You can use the font resizer:
to give different font sizes for your texts.
4. You can hide layers:
to display other ones. So for example you could use a different wording on phones for “Lagermitarbeiter/Lagerhelfer”.
About the spacing:
That space comes from an “elementor-widget-spacer” element, that is below the slider. So in your Elementor page builder you shouldn’t try to adjust the slider’s container, but rather look at the next element on the page.
This CSS code could also hide it:
.elementor-element-5c49092{
display:none;
}
but I rather suggest figuring out this issue within Elementor, as this problem could come back in the future elsewhere too. Maybe try to contact Elementor developers, if you aren’t able to find this element.
Viewing 6 replies - 1 through 6 (of 6 total)
The topic ‘Slider does not adapt to theme’ is closed to new replies.
