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?

Custom code Published on

Note FlowSuggest is not affiliated with Webflow. For official help, visit the Webflow community.

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:

  1. 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.

  2. 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").

  3. 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.

  4. 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.

  1. 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:

  1. How do I add a custom CSS class to an element in Webflow?
  2. Can I change the numbering style for a list in Webflow's CMS collection?
  3. What is CSS and how can it be used to style elements in Webflow?