Second row in slides doesn't show on mobile devices (but does show in Webflow and when inspecting in browser)

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.

Screenshot when inspecting in Chrome:

Screenshot from iPhone in Chrome (looks same in Safari):

Here is my site Read-Only: Webflow - Vermax Group

Here is my site Published:

Hi @mel_vee, thanks for your post.

I took a quick look, on mobile portrait viewport I might try setting the slide mask in that symbol to an overflow visible:

Shared with CloudApp

Right now it is set to overflow hidden and the slider has a height of 300px by default when an auto height is used.

After updating the mask to overflow visible, republish the site and check again, on a test I made on iOS, it seemed to work for me:

I hope this helps, let me know how it goes.

Hey Dave, thanks so much for getting to this!

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 :joy:

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:

Shared with CloudApp

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 hope this helps.

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 :woozy_face: Pls ignore my whining if I am totally off base and there is a really good reason to default the height setting like that :joy:

1 Like