Streaming live at 10am (PST)

Sliders disappear when Preview in phone landscape and portrait mode


#1

Kind of stumped by this. My sliders all look great in Design mode but seem to disappear in phone landscape and portrait when I go to Preview mode Here is my public working link Any idea why it is doing this?


#2

Hi @UrMarkGetSetGo, select the slide mask for each of your sliders in the Landscape Phone view, and give your slider mask some height, equal to the height you want the images to be when displayed in horizontal view. That should fix your issue. Try that and see if it helps you. Cheers !


#3

That did it. Thank you Dave. smile


#4

In portrait mobile view why do slides stack vertically like on my picture? When you change slides they all move as a one stacked slide. Project: http://salsadance.webflow.com
What property could help here?
PS Tried messing with the mask height - it didn't help me.


#5

Hi @ilya, thanks for your post. I would make some styling changes on your slider. I have made a video as an example of what could be changed. You might have to play around with the percentage widths on your slider to get it to be the way you want. I would recommend using percentage based widths, and try not to set classes at lower viewports unless you absolutely have to.

Here is my video, I hope it helps:

http://quick.as/p2qwcwq0

Cheers, Dave


#6

Cyber Dave, thanks a lot!
Very professional - to make a clear video response. smile

Just as a side note. It was tricky to set the Clear:none property for all views. It's not very clear why we have to first select X and then discard the property?
When I did that for Desktop, Tablet and Landscape views and tried to look back at the Desktop - there was automatic switch to Clear:both.


#7

Hi @ilya, I might have accidentally cleared that as I was going through the video, but you can leave those clear settings and see how it works. The most important thing is getting the sliders fixed up with the percentage based widths. You can play around with it, if something is not looking correct.

I hope that helps, Cheers, Dave smile


#8