How can I resolve the issue of the first digit of a numbered list being missing or cut off when scrolling past #9 on mobile in Webflow's CMS collection?
To resolve the issue of the first digit of a numbered list being missing or cut off when scrolling past #9 on mobile in Webflow's CMS collection, you can follow these steps:
-
Adjust the numbering style: By default, Webflow's CMS collection uses an ordered list (
ol) to display the numbered list. To fix the issue, you can change the numbering style to a custom style using CSS. -
Add a custom CSS class: First, you need to add a custom CSS class to the ordered list element. To do this, navigate to the Designer panel in Webflow and select the ordered list element from the Navigator. In the right-hand Style panel, click on the "+" button next to the "Class" field and enter a class name (e.g., "custom-list").
-
Apply custom numbering style: With the custom CSS class added, you can now apply the custom numbering style. Go to the Page Settings by clicking on the gear icon in the top-right corner of the Designer panel. In the Page Settings modal, click on the "Custom Code" tab.
-
Add custom CSS code: In the Custom Code tab, scroll down to the "Footer Code" section and add the following CSS code:
<style>.custom-list { counter-reset: custom-counter;}.custom-list li { list-style-type: none; position: relative;}.custom-list li:before { content: counter(custom-counter); counter-increment: custom-counter; position: absolute; left: -1.3em;}</style>This code will reset the counter for each ordered list item and position the counter before each item.
- Publish and test: After adding the custom CSS code, save and publish your Webflow project. Open your website on a mobile device and navigate to the CMS collection that contains the numbered list. Scroll past #9, and you should now see each digit of the numbering properly displayed.
By following these steps, you can resolve the issue of the first digit of a numbered list being missing or cut off when scrolling past #9 on mobile in Webflow's CMS collection.
Additional questions:
- How do I add a custom CSS class to an element in Webflow?
- Can I change the numbering style for a list in Webflow's CMS collection?
- What is CSS and how can it be used to style elements in Webflow?
