Why isn't there space between my list and a left-floated image?

The classes needed to float an image don't always play nicely with lists, and require a workaround.

Unfortunately, images floated to the left of lists won't display an ideal margin by default; however, there is a workaround in DesignPLUS!

example of list bullets aligned against the edge of a left-floated image

The Fix: Adjust the Image's Margins

We can easily adjust the margins of the image in DesignPLUS, to provide more space between the image and the list:

  1. If you haven't already enabled the Advanced tools in your DesignPLUS sidebar:
    1. Select the "More Options" kebab menu (three vertical dots) in the upper right of the sidebar.
    2. Select User Settings.
    3. Select the checkbox for "Enable all Advanced Tools."
  2. Select the image in the Canvas Rich Content Editor.
  3. Then select the Advanced tab in the sidebar.
  4. Choose Style Editor.
  5. Ensure that the target is set to img (Image).
    target is set to img (Image)
  6. Scroll to the bottom of the options. In the Advanced panel, inside the Classes, find and delete "me-3".
    classes section of advanced panel showing the me-3 and then the classes with me-3 deleted
    (Note: This will temporarily make the margins/spacing look even worse, but it's a required step!)
  7. Expand the Spacing & Alignment panel (just above the Advanced panel).
  8. Next to Margin (px), select the four-way arrow button, and input a numerical margin (example: 35) for R (right) field.
    Image-Left-Float-List-Issue-Margin-R35-1
  9. Save the page.

example left-floated image and list, with 35px right margin on the image