Troubleshooting formatting in WYSIWYG

Sometimes when content is copied from another document and pasted into your ButterCMS blog post WYSIWYG field, formatting conflicts may arise.  This is usually because of one of two reasons:

1. The formatting used in the original document transfers over into our WYSIWYG editor differently than intended.

2.Your site's CSS and styling override any WYSIWYG editor formatting you may have applied.  This is the most common issue we see, and is usually resolved when you have your developer take a look at your app's CSS.

Here are some common formatting issues that could arise when copying over content into Butter's WYSIWYG editor and how to address them:

When I apply formatting to a section of highlighted text, it changes the format for text before or after this section I have highlighted.

What is likely happening is that you don't have proper line breaks in your post. Review this quick video showing how to fix this problem:


How do I adjust the line-height of bullet points in blog posts?

You would need to configure this on your website CSS as that controls exactly how your final content looks and feels. In some cases, it may be slightly different than how it appears on the ButterCMS editor.

How do I add spacing or line breaks between paragraphs?

If you're seeing that adding a bunch of white space by pushing Enter in your WYSIWYG is not resulting in the extra white space you need on your actual site or preview, this might be because your application's CSS for that page is overriding <p> tags to have 0 margin. This likely means that using a <br> tag or pushing Shift+Enter instead of Enter will provide you with the white space you're looking for.

Still have a question?

Our Customer Success team is standing by to help.