Turn off hyphenation in InstaBuilder 2.0

I’m using version 2.1.6 as of writing this post, but it should work fine with any version.

You may have noticed some weird hyphenation issues with InstaBuilder. Inside the editor it all seems to be fine, and on the finished page in Chrome it all looks fine. But in Firefox (and possibly others), all your titles and paragraphs have some terrible hyphenation all through them.

I’ve put together a little guide on how to remove hyphens in InstaBuilder 2.x.

In the CSS that ships with IB, there are some strong hyphen and word-break rules. You can either override it in the wp-content/plugins/instabuilder2/assets/css/instabuilder2.css  file, or by using the per-page method below.

Using the below method will keep your changes after an InstaBuilder upgrade.

In the page with the hyphen issue, go into Settings and then Scripts/Codes.

Paste this into Head section:

* {
	word-wrap: normal !important;
	word-break: normal !important;
	-webkit-hyphens: none !important;
	-moz-hyphens: none !important;
	-ms-hyphens: none !important;
	-o-hyphens: none !important;
	hyphens: none !important;

That’s it! You’re overriding the out-of-the-box styles that cause the awful looking hyphenation.

Let me know if you run into any issues.

2 thoughts on “Turn off hyphenation in InstaBuilder 2.0

Leave a Reply

Your email address will not be published. Required fields are marked *