Hello!
I build a slider on this site, here is the share link.
I am having trouble understanding how to contain the text content between the arrows at smaller sizes. At small desktop/table the arrows start to land on top of the text, and eventually the text gets cut off on top and bottom.
Appreciate any recommendations, thanks!
If you go into the tablet/mobile views you can edit the “slider” div to have a bit more padding on the right and left side. Then move the arrow divs with the position tool:
You should probably edit the text size on the mobile views too.
Thanks for the suggestion!
I can play with the padding a bit, but it’s more of a band-aid solution. I do intend on changing text size along with some other style adjustments, but first I’d like to properly contain the text and/or keeping the arrows from sliding over top of it.
How is it a band-aid solution? The arrows are positioned absolute relative to the slider w/content, so they’ll always be over the text if you don’t make space for them with margins.
Perhaps what I’m looking for is a way to contain the text without the arrows having to be absolute. Forgive me if I’m not describing it correctly. Right now, the arrows are quite far from the text in a wide browser, and in a narrower browser the undesired overlapping occurs. I would like to avoid both of these things by having the arrows sit directly next to the text box at all times, regardless of browser width.
And to do that you need to set some boundaries. The arrows have to be absolute because of the overflow:hidden attribute of the sliders. I don’t understand why this is an issue? Webflow pages are adaptive - just set the boundaries for each view. The arrows will stay at the sides of the text box regardless of the browser width. It took me 15 seconds to fix it in your preview link…