Help! I am having a weird issue with my slider - in Webflow it looks as hoped on all screen sizes, also when I inspect the published site in various browsers both tablet and mobile devices it looks as hoped. However when I test on an actual iPhone and Samsung tablet I only see the slider image with the nav arrows, nothing below it.
When I test in Browserstack it is missing the second row on all apple devices and pretty much every other device regardless of browser, except for a couple random android devices. The random devices it did show up on were displaying the mobile layout as programmed in Webflow.
That does help in that the full height of the slider now shows on all devices including when I check on my iphone. However now all the slides are visible all the time, so when you drag the page to the right on all screensizes and devices the offscreen slides are all there. I believe overflow: hidden is what the slider module is using to hide inactive slides. Kind of an issue
Hi @mel_vee, yep you are absolutely right, the overflow is hidden on the slide mask by default so that the other slides are not shown.
I would change that overflow style and remove the override to take the default.
I think you might have to change this layout on mobile, the slide with all the content is taller than the mobile device height, so the content anyway will be cut off when trying to stack the content on top of each other.
What I might suggest is to style your page sections so that the page sections are 100% or 100vh in height, then in each page section put your content to fit 100% in width and in height.
Usually if content overflows on a slide, another possible way to do this is to assign an overflow: auto to your slide wrapper that is nested inside of each slide so that content can be scrollable on the slide on the mobile device.
I might also recommend that instead of using a background image applied to a div in the slider that is having a height of 500px on the background image div, I would put an image element in the slider instead of the div with background image.
For example:
This way, the slider will be as tall as the tallest slide with content and the images in the slider will get the responsives images treatment on mobile, whereas the background images do not use responsive images.
When using background images, the elements that have the background image assigned will have no height unless you give the div the background image is some height, and this is causing the slide content to be cut off on mobile.
I might also suggest to make the image in the slides smaller on mobile, maybe half the height of what they are now to make more room on the slide for the content to show when the mobile device you are viewing on has less height.
I ended up overwriting the slider height in custom CSS with “height:auto” and then I could see how the slider actually looked on a phone. I did re-style a bunch so it is a more pleasant experience - thanks for your suggestions : ) I will go back in and write some better positioning for the arrows with JS later as well, but for now the worst issue has been addressed.
The “height: 300px” in the Webflow Slider default CSS doesn’t seem necessary. It would be way better if you could style it entirely in the Designer (especially a basic setting like height). Just seems like it is in the way. When I have to overwrite basic CSS like that it gives me Wordpress PTSD Pls ignore my whining if I am totally off base and there is a really good reason to default the height setting like that
Pls ignore my whining if I am totally off base and there is a really good reason to default the height setting like that