I have a CMS collection that has very long numbered lists as their content. Example here: 698 General Knowledge Trivia Questions (Ranked From Easiest To Hardest)
When you scroll past #9 to the double digits on mobile, the first digit is either completely missing or partly cut off –
Any ideas for how to change the formatting so this isn’t happening?
Here is my public share link: Webflow - Water Cooler Trivia
Your preview link is broken, but I would imagine you’ll just need to increase the padding on your list element.
See screengrab below.
You need to drop a Rich Text Element into a page. Insert an ordered list within that Rich Text element. Click out of the Rich Text Element. Then view the Rich Text Element in the navigator and select the ordered list element. Move to the style panel and in the style selector click the mobile icon and select “All Ordered Lists”. Change the left padding.
@Port_of_Folio The issue is that all of our content is stored in a single text box within the CMS “Trivia Question Sets” – We don’t have the ability to take the list portion from those articles and remove them from that larger input. Does that make sense?
When you drop in the Rich Text Element, this is for modifying the styles only. After you’ve made the adjustments to the sample RTE, you’ll then delete it. But the changes you’ve made to that sample RTE will carry over to all of your CMS text.
Seeing that you currently have 25px padding on the sample ordered list, this means that someone made a modification to the style along the way. If you’re using a pre-made template, that means the original designer made this change and they probably didn’t factor in double digits, on mobile, when tweaking.
@Port_of_Folio Would you be willing to converse with me over email – eli@watercoolertrivia.com? I’m trying to follow what you’re saying (and you’re the most useful person we’ve come across to help with this!), but I may be too much of a rube without more hand holding.
Here’s a little video showing how I changed the ordered list padding.
Editing the individual parts of a rich text element is somewhat buried because you first have to add a RTE to the page, create an ordered list, and then navigate to find it, then dig for some relatively hidden css to manipulate. Hope this helps!
OMG! We’ve done it! What a weird and wild solution! Thank you so much!! How could we ever say thank you?
