Skip to main content
MindTouch Success Center

Fix overlapping lists and floating content

Applies to:
All MindTouch Versions
Role required:
Admin
Add CSS to fix overlapped list items when an image or other content is floated on a page.

Site Admin steps

  1. Navigate to Site Tools > Control Panel > Custom Site CSS
  2. Add the following CSS code on a new line at the bottom of the All Roles CSS field:
    .mt-overflow-auto {
        overflow: auto;
    }
  3. Click Save Changes

Page-level steps

  1. Open the impacted page in Edit mode and select View > Source
  2. Add the following text in the list tag (<ol> or <ul>): class="mt-overflow-auto"
  3. The list should look similar to:
    <ul class="mt-overflow-auto">
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
    </ul>
  4. Save the page

Examples

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
  • Was this article helpful?