Solved

Unwanted spaces in my body text

  • 15 November 2021
  • 6 replies
  • 479 views

Badge +1

Hi there,

My body text is creating huge spaces in the preview, but doe not show in my typing box.

How can I get rid of them as I am creating a campaign message?

icon

Best answer by Taylor Tarpley 15 November 2021, 23:32

View original

6 replies

Userlevel 6
Badge +51

Hi @twiggpuzzles

 

Welcome to the Community and thank you for sharing your question with us! Sorry to hear you’ve been experiencing format issues! 

 

There could be various reasons as to why there is additional space added to your email. First, I would navigate back into your template and investigate the block styles and style tab to  ensure there is not unnecessary or additional spacing added to the text. I would check things like the line height or padding, as this could create extra space in the text.

 

Additionally, your source code could be the culprit. If you copy and pasted the text from another source (ie. word doc or website), there could be extra HTML you did not place there that is creating space. I suggest deleting any spaces between the text by hitting backspace between the paragraphs in question and then using Shift+Enter to remove break tags (<br>), as these tags could be the reason for the additional space. 

 

Finally, if that does not resolve the issue you could try paste everything in your text block as plain text and then re-format the block. The Plain Text tool is the little clipboard with the T icon. @alex.hong suggested a similar solution in the post below.

 

 

Thanks for being a part of the Community! Hope this helps!

-Taylor 

 

Hello I am having this same issue with the new editor. The code doesn’t show and extra <br> it is very simple. 

Userlevel 6
Badge +51

Hi @anniehuman328

 

Thanks for sharing your question with us! 

 

To clarify, do you mean to say you have checked for any additional or <br> that shouldn’t be there in your source code and did’t find any? If so, have you ensure that there is no additional padding in your black styles tab of your text block in question as well as ensuring you haven’t copy & pasted text from an external resource (ie. word doc or website)?

If you did the latter, I recommend pasting in Plain text first, then use the Klaviyo editor tools to customize your font size, color, line-height, etc. The reason being is when you paste in content you are also potentially pasting in unwanted HTML that has inlined CSS to force the styling of your text which can make it difficult to customize once in the editor.

 

Hope this helps!

-Taylor 

Hi,
I have the same issue with this.

Solutions that I sort of found to fix this problem:

  • Try to avoid using a lot of <br /> or <br>
  • Use <p> for pharagraphs, so if you want a real spacing in between text
  • use different text boxes
  • use a table if you are going to use text on different lines. (with a lot of <br>)

So mainly my solution is to avoid using <br> or <br />  in the new editor. But to further clarify the “problem” I encountered:

 

In the text Editor I write the following code (started from plain text, and added some code to it)
<p style="text-align: center;">
     <span style="color: #ffffff; font-size: 16px;">Compagny name
          <br />
     </span>
<a style="color: #ffffff;" href="https://goo.gl/maps/compagny%20place" text="Streetname Holland">Streetname</a>
      <br />
<a style="color: #ffffff;" href="https://goo.gl/maps/compagny%20adres" text="compagny adres">Compagny adress 2</a>
       <br />
       <br />
<a style="color: #ffffff;" href="tel:phone%20number">phone number</a>
      <br />
<a style="color: #ffffff;" href="mailto:compagny@compagny.com">compagny@compagny.com</a></p>

The more <br /> I add to the text, the more space appears on the bottem of the textbox as seen in the next picture.
 


As I inspect this textbox with the Dev tools of Google, I see a lot of <br> below this. With every <br />  I add in the textbox in the editer there will appear a invisible <br> in this box. The Google dev code is:
 


I haven't found the solution for this. As I wrote this specific box again for like 4 times now, starting with plain text. 

I'm really curious if there is a solution to be found. 
The only thing I now can think of is splitting the textbox in 2 boxes so I won't use to many <br />

As for this button and the new editor:

 

 

 

This little box is not in the new editor. as the CSS seems to work a little different from the old editor. There is a button to “remove formatting” but that doesn't work for this issue. Those “invisible” <br> are still there.


I hope this clarified the problem kinda. and I hope there can be found a solution.

Greetings,
Klasina

 I just found out.

this “problem” is only visible in the editor.
as soon as you check it in the test and preview fase. all the spacing is gone.
As seen in these screenshots below

 

Userlevel 6
Badge +51

Hi @Klasse

 

Thanks for sharing out your response with others! You bring up a huge point! The best way to test how your emails will be viewed and any codes will function is best tested, not in viewing in the editor itself, but by sending a test email to yourself. 

 

Great work!

 

-Taylor

Reply