Back to Community
Home / Community / General

Fixing Otter Blocks Icon List Alignment Issues

34 threads Sep 16, 2025

Content

If you're using the Otter Blocks Icon List and find that your icons and text become misaligned when an entry wraps to a second line, you're not alone. This is a common styling issue reported by users. This guide will explain why it happens and provide a tested CSS solution to fix the vertical alignment.

Why Does This Alignment Issue Happen?

The misalignment occurs due to the default CSS flexbox properties applied to the icon list items. When the text within a list item is long enough to wrap to a second line, the default alignment can cause the icon and the text baseline to become misaligned, breaking the visual consistency of the list.

How to Fix the Icon List Alignment

The most effective solution is to add custom CSS that overrides the default styles. Based on community reports and suggested fixes from the Otter Blocks team, the following code has proven successful for many users.

  1. Navigate to your WordPress Dashboard.
  2. Go to Appearance > Customize.
  3. Open the Additional CSS section.
  4. Copy and paste the following CSS code into the editor:
.wp-block-themeisle-blocks-icon-list:not(.is-style-horizontal) .wp-block-themeisle-blocks-icon-list-item {
    min-height: 45px;
}
.wp-block-themeisle-blocks-icon-list .wp-block-themeisle-blocks-icon-list-item {
    align-items: start;
}
.wp-block-themeisle-blocks-icon-list .wp-block-themeisle-blocks-icon-list-item i {
    text-align: start;
}
  1. Click Publish to save your changes.

What This Code Does

  • min-height: 45px; ensures each list item has a minimum height, providing consistent space for the icon and text.
  • align-items: start; aligns the icon and text to the start of the flex container, which is crucial for proper vertical alignment when text wraps.
  • text-align: start; ensures the icon itself is aligned correctly within its container.

Testing the Fix

After applying the CSS, clear any caching plugins you might be using and refresh the page containing your icon list. Check the alignment on both desktop and mobile views to ensure the text is now properly vertically aligned with the icon, even when it wraps to multiple lines.

Need Further Help?

If the issue persists after applying this code, it's possible your theme or another plugin is applying conflicting styles. You can try using your browser's inspector tool to identify other CSS rules that might be affecting the icon list. For more complex scenarios, you may need to adjust the CSS values (like the min-height) to better suit your specific design.

Related Support Threads Support