Icons & Text Not Wrapping Properly - Forum | JoomShaper
Solved SP Page Builder

Icons & Text Not Wrapping Properly

Asked by john@gs 5 years ago Last activity 5 years ago

Hello,

I'm using a heading with an icon and when the text wraps to the next line it sows up under the icon. How can this be prevented? The text should align just below the text above it.

Kind regards,
John

Accepted answer

Marked as the solution
john@gs Asked this
5 years ago

Hi Rashida,

If fixed the issue by adding some addition padding, and added the #addonId class to isolate this to the individual add-ons. I really like that Joomshaper added the ability with #addonId, very nice.

#addonId .sppb-addon-title-icon {
    padding: 0 5px 0 30px;
    margin-left: -30px;
}

#addonId .sppb-addon-title, .sppb-addon-header {
    margin-left: 30px;
}

Kind regards,
John

3 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
5 years ago

Hi there!

Thanks for your query.

There is no default way to do that actually.

However, you can use the following code in your custom.css file if you like it:

.sppb-addon-title, .sppb-addon-header{
    margin-left: 30px;
  }

.sppb-addon-title-icon {
    margin-left: -30px;
}

Best Regards

john@gs Asked this
5 years ago

Hi Rashida,

The above CSS works, but it also causes another issue.

The content is now showing up outside the column making it look out of alignment with the other content elements.

Kind regards,
John

Rashida Rahman Staff
5 years ago

You are always welcome!

Glad that you have sorted it.

You may close the post:)

Best Regards

Log in to reply.