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?

Published on
September 22, 2023

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?