Streaming live at 10am (PST)

Slider mobile help


#1

Hi there!

Building a new slider that lives in the top of our Resources page (blueboard.com/resources), and I can’t figure out how to get it to fully render in Mobile - looks good on Desktop, but in mobile the height is cut off from the section below it. I can’t figure out the settings to make sure this displays correctly in mobile.

Can you share some guidance for cleaning this up? Needing to launch this page tomorrow! :slight_smile:

Thanks so much,
Morgan

Desktop view (normal):

Mobile view (cuts off at bottom):

Here is my site Read-Only: https://preview.webflow.com/preview/blueboard?preview=1d03d63c11528fa9ae9d465b1d7e4203

Thank you!
Morgan



#2

The trick here is have fixed heights set for each view.

Starting with your desktop view of the slider, you’ll want to give it a fixed height. 330px seems to be about right. Then around 350px on tablet. 700px on phones.

700 is pretty tall for the phone views. I’d recommend setting your image to “display none” on phone views to help shorten that height.

As a general rule, I always start out by giving my sliders a fixed height since the Webflow’s native component doesn’t allow for variable heights for each slide. It will size the entire widget to the slide that has the most/tallest content in it. (for this reason I usually try to keep the content between each slide similar)

Another thing I’ve learned is never give an individual slide a class or change any of it’s settings. Instead, drop a div inside of the slide and place/style your content inside of it. I’ll usually assign this slide a height of 100% and width of 100%. It will then conform to the fixed height you’ve assigned to the slider as a whole.


#3

Thank you, the fixed height was the perfect solve and I’ve adjusted accordingly, it’s now live on our website, thanks for your help!!

  • Morgan

#4

Another helpful hint from a person that has read countless UX/UI docs is that people normally swipe over sliders on a mobile so you may even want to hide the arrows as well which will give you more realestate for the text width wise. Then its just a case of making sure the Disable swipe gestures isn’t checked.