Building a new slider that lives in the top of our Resources page (Employee Recognition & Rewards Planning Guides, Case Studies and Webinars), 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!
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.
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.
