Skip to main content
MindTouch Success Center

Fix overlapping lists and floating content

This page applies to:MindTouch (current)

This article enables authors to fix this overlap by adding a CSS class to their list. When you have an image or other content floated on a page, it can overlap list item bullets or numbers. As a site administrator, you will need to setup a site-wide override.
 

How to fix list overlaps


Site administrator steps

  1. Open the Site tools > Control panel menu.
  2. Select the Custom Site CSS option.
  3. Add the following CSS code to the end of your All Roles CSS on its own new line:
.mt-overflow-auto {
    overflow: auto;
}
  1. Click Save Changes.

Content author steps

Apply a new CSS class to your list:

  1. Go to an article in your MindTouch site and click Edit.
  2. In the editor, select View > Source (editing HTML)
  3. Add the following text in the list tag (<ol> or <ul>): class="mt-overflow-auto"
  4. The list should look similar to the following:
<ul class="mt-overflow-auto">
    <li>Item 01</li>
    <li>Item 02</li>
    <li>Item 03</li>
</ul>
  1. Save the page.

Example fix


Example before fix

pictures.pngLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis, ligula ac convallis ornare, dui tortor tincidunt dolor, nec laoreet dui nunc vitae tortor. Donec eu massa id est faucibus ultricies a nec nibh.

  • A list item
  • A list item
  • A list item
  • A list item

Example after fix

pictures.png

Lorem ipsum dolor sit amet, consecteturadipiscingelit. Maurismattis, ligula ac convallisornare, duitortortincidunt dolor, neclaoreetduinunc vitae tortor. Doneceumassa id estfaucibusultricies a necnibh.
  • A list item
  • A list item
  • A list item
  • A list item