Icons & Text Not Wrapping Properly - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

Icons & Text Not Wrapping Properly

J

john@gs

SP Page Builder 4 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

0
4 Answers
Order by
Oldest Newest Votes
J
john@gs
Accepted Answer
4 years ago #13349

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #12927

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

0
J
john@gs
Accepted Answer
4 years ago #13344

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

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 4 years ago #13386

You are always welcome!

Glad that you have sorted it.

You may close the post:)

Best Regards

0