Issues with spaces in an article

Answered

Posted Apr 22, 2021

Hello team,

When I edit my article in Guide with the desired spacing before and after some bullet points, the article looks good, see HERE but as soon as I publish it and preview it in the help center it ends up having too much space. When I on the other hand delete the extra space, the text appears too close to other sentences upon publishing. How can I have desired spaces without these changing once published in the help center? The screenshot in attachment shows how the text ends up appearing in the help center. Many thanks in advance for your help.

6 comments

Date

Newest

Shirin Caiola

Apr 29, 2021

Hello again Kyle,

Thank you very much for your efforts and time to help me. While there is a little more spacing needed than I'd like, (right before "Option 2" and right after the two bullet points under Option 2), I'm confident my supervisor and teammate will approve of this look! Thanks again and have a great day! :)

Kyle Beaulieu

Apr 24, 2021

Alright, so I pretty much started from scratch. I remoted all code and just kept the actual text. I even removed the code so I can start from a clean slate. After some editing, and playing around, this is what I came up with. Maybe create a new article to test this code so you're not replacing the actual article, just in case it doesn't work properly for you. Also, I would highly suggest making sure there aren't any missing spaces or anything. I caught a few in my process but there is a chance I missed some. Just a heads up.

Try copying this code and pasting it into a new and blank source code window (instead of trying to copy certain parts into certain areas like we tried to do last time):

<p>
  Bitte beachten Sie, dass eine Teilrückerstattung hier nicht möglich ist. Wenn
  Sie eine Teilrückerstattung oder eine Rückerstattung der Mehrwertsteuer benötigen,
  kontaktieren Sie bitte unser
  <a href="/agent/dashboard" target="_blank" rel="noopener">Kundenservice-Team</a>.
  (Option 2 unten).
</p>
<p>
  <strong>Option 1)</strong> Wenn Sie eine
  <strong>vollständige Rückerstattung</strong> Ihrer Bestellung anfordern möchten,
  füllen Sie bitte dieses
  <a href="https://www.cleverbridge.com/refund" target="_blank" rel="noopener">FORMULAR</a>
  in englischer Sprache aus. (Unten finden Sie eine kleine Anleitung zur Rückerstattungsanfrage.)
</p>
<ul>
  <li>
    Sollten Sie diese nicht haben, können Sie über
    <a href="https://www.cleverbridge.com/?scope=cusecolp" target="_blank" rel="noopener">diesen Link</a>
    Ihre Referenznummerabrufen.
    <hr style="height: 15px; visibility: hidden;">
  </li>
</ul>
<p>
  <strong>Option 2)</strong> Wenn Sie Ihre Rückerstattung lieber auf Deutsch anfordern
  möchten, eine Teilrückerstattung oder eine Rückerstattung der Mehrwertsteuer
  benötigen, kontaktieren Sie bitte unser Kundenservice-Team über unser
  <a href="https://support.cleverbridge.com/hc/de/requests/new?ticket_form_id=18434" target="_blank" rel="noopener">Kontaktformular</a>.
  Bitte geben Sie dabei an:
</p>
<ul>
  <li>Ihre cleverbridge Referenznummer.</li>
  <li>
    Den Grund für die Rückerstattung.
    <hr style="height: 15px; visibility: hidden;">
  </li>
</ul>
<p>
  Wir werden Ihre Anfrage schnellstmöglich bearbeiten und Sie erhalten spätestens
  nach 2 Werktagen eine Antwort.
</p>
<p>
  <br>
  <span class="wysiwyg-underline"><strong>Anleitung zu Option 1:</strong></span>
</p>
<p>Bitte geben Sie im englischen Formular folgendes an:</p>
<ul>
  <li>Ihre Emailadresse (Auf Englisch: "Email")</li>
  <li>
    Ihre cleverbridge Referenznummer. (Auf Englisch: "Your cleverbridge reference
    number") Sollten Sie diese nicht haben, können Sie über den Link unter diesem
    Eingabefeld Ihre Referenznummer abrufen.
  </li>
  <li>
    Den Grund für die Rückerstattung. (Auf Englisch: "Refund reason").
  </li>
  <li>
    Die im Bild angezeigten Zeichen zur Verifizierung (Auf Englisch: "Enter the
    characters shown in the picture below:")
  </li>
  <li>
    und anschliessend klicken Sie dann auf den orangenen Knopf Rückerstattungsanfrage
    senden (Auf Englisch: Rückerstattungsanfrage senden.)
    <hr style="height: 15px; visibility: hidden;">
  </li>
</ul>
<p>
  <strong>Rückerstattungsanfrage eingegangen</strong>:
</p>
<p>
  In Kürze erhalten Sie eine E-Mail mit denDetails zu Ihrer Bestellung.Ummit derRückerstattungfortzufahren,klicken
  Siebitteauf den Link "Rückerstattung bestätigen".
</p>
<hr style="height: 15px; visibility: hidden;">
<p>
  <strong>Rückerstattung wird bearbeitet</strong>:
</p>
<p>
  Sie sollten innerhalb von 24 Stunden eine Bestätigungs-E-Mailerhalten.Wenn Sie
  diese E-Mail nichterhalten haben, überprüfen Sie bitte Ihren Spam-Ordner oder
  kontaktieren Sie unser
  <a href="/agent/dashboard" target="_blank" rel="noopener">Kundenservice-Team</a>.
</p>
<hr style="height: 15px; visibility: hidden;">
<p>
  <strong>Rückerstattungsanfrage nicht eingegangen</strong>:
</p>
<p>
  Eine Online-Rückerstattung für Ihre Bestellung leider nicht möglich ist. Diese
  erfordert eine manuelle Bearbeitung. Bitte kontaktieren Sie hierfür unser
  <a href="/agent/dashboard" target="_blank" rel="noopener">Kundenservice-Team</a>
  unter Angabe des Grundes für die Rückerstattung. Wir werden Ihre Anfrage innerhalb
  von 24 Stunden bearbeiten.
</p>
<hr style="height: 15px; visibility: hidden;">
<p>
  <strong>Fragen zum Produkt oder Installationsprobleme?</strong>
</p>
<p>
  Sollten Sie eine Rückerstattung wünschen, weil Schwierigkeiten bei der Installation
  oder bei der Nutzung der Software auftreten, könnten Sie auch zunächst technische
  Hilfe vom Softwarehersteller anfragen. Viele Schwierigkeiten können von den technischen
  Experten unserer Partner schnell gelöst werden. Die Kontaktinformationen zum
  technischen Support finden Sie in unserer Liefer-E-Mail. Unsere meistgesuchten
  Partner finden Sie
  <a href="https://support.cleverbridge.com/hc/articles/202929804?article_ref=201370840" target="_blank" rel="noopener">hier</a>.
</p>
<p>
  Falls die Probleme auch vom Softwarehersteller nicht gelöst werden können oder
  Sie keinen technischen Support wünschen, kontaktieren Sie uns bitte über das
  <a href="https://support.cleverbridge.com/hc/de/requests/new?ticket_form_id=18434" target="_blank" rel="noopener">Kontaktformular</a>
  und wir überprüfen gerne Ihre Rückerstattungsanfrage.
</p>

I just did a quick test and published that code on my Guide, and it looked like this:

Looks good on my end but try it out and let me know how this works out for you!

Shirin Caiola

Apr 23, 2021

Hello again Kyle,

Thank you very much for your suggestion. I tried inserting that code and unfortunately the two spots still don't show enough spacing:

Here is the section in html:

Kyle Beaulieu

Apr 23, 2021

Thank you! A trick I like to use that adds a half line break (when a full break is too much but no break is not enough) is to add

<hr style="height: 1px; visibility: hidden;">

before the end of area you're typing. Try adding that where I indicate here and let me know if this helps:

If this does help, and there are other areas that need some tweaking, or if this doesn't help, let me know and I'll see what I can do!

Shirin Caiola

Apr 23, 2021

Hello Kyle,

Thank you for your response. It'd be my pleasure to do so, thank you again for your help:

Bitte beachten Sie, dass eine Teilrückerstattung hier nicht möglich ist. Wenn Sie eine Teilrückerstattung oder eine Rückerstattung der Mehrwertsteuer benötigen, kontaktieren Sie bitte unser <a href="/agent/dashboard" target="_blank" rel="noopener">Kundenservice-Team</a>.  (Option 2 unten).


Option 1) Wenn Sie eine
vollständige Rückerstattung Ihrer Bestellung anfordern möchten,
füllen Sie bitte dieses
<a href="https://www.cleverbridge.com/refund" target="_self">FORMULAR</a> in
englischer Sprache aus. (Unten finden Sie eine kleine Anleitung zur Rückerstattungsanfrage.)

<ul>
<li>
Sollten Sie diese nicht haben, können Sie über
<a href="https://www.cleverbridge.com/?scope=cusecolp" target="_self">diesen Link</a>
Ihre Referenznummer abrufen.
</li>
</ul>

Option 2) Wenn Sie Ihre Rückerstattung lieber auf Deutsch anfordern
möchten, eine Teilrückerstattung oder eine Rückerstattung der Mehrwertsteuer
benötigen, kontaktieren Sie bitte unser Kundenservice-Team über unser
<a href="https://support.cleverbridge.com/hc/de/requests/new?ticket_form_id=18434" target="_self">Kontaktformular</a>.
Bitte geben Sie dabei an:

<ul>
<li>Ihre cleverbridge Referenznummer.</li>
<li>Den Grund für die Rückerstattung.</li>
</ul>
 

Wir werden Ihre Anfrage schnellstmöglich bearbeiten und Sie erhalten spätestens
nach 2 Werktagen eine Antwort.

 

Anleitung zu Option 1:

Bitte geben Sie im englischen Formular folgendes an:
<ul>
<li>
Ihre Emailadresse (Auf Englisch: "Email")
</li>
<li>
Ihre cleverbridge Referenznummer. (Auf Englisch: "Your cleverbridge reference number")
Sollten Sie diese nicht haben, können Sie über den Link unter diesem Eingabefeld
Ihre Referenznummer abrufen.
</li>
<li>
Den Grund für die Rückerstattung. (Auf Englisch: "Refund reason"). 
</li>
<li>
Die im Bild angezeigten Zeichen zur Verifizierung (Auf Englisch:
"Enter the characters shown in the picture below:")
</li>
<li>
und anschliessend klicken Sie dann auf den orangenen Knopf Rückerstattungsanfrage
senden (Auf Englisch: Rückerstattungsanfrage senden.)
</li>
</ul>

Rückerstattungsanfrage eingegangen: <img src="https://support.zendesk.com/hc/article_attachments/1500010238281/mceclip0.png" alt="mceclip0.png" width="74" height="58">


In Kürze erhalten Sie eine E-Mail mit den Details zu Ihrer Bestellung. Um mit der Rückerstattung fortzufahren, klicken Sie bitte auf den Link "Rückerstattung bestätigen".


Rückerstattung wird bearbeitet: <img src="https://support.zendesk.com/hc/article_attachments/1500010238881/mceclip1.png" alt="mceclip1.png" width="77" height="54">


Sie sollten innerhalb von 24 Stunden eine Bestätigungs-E-Mail erhalten. Wenn Sie diese E-Mail nicht erhalten haben, überprüfen Sie bitte Ihren Spam-Ordner oder kontaktieren Sie unser <a href="/agent/dashboard" target="_blank" rel="noopener">Kundenservice-Team</a>.


Rückerstattungsanfrage nicht eingegangen:<img src="https://support.zendesk.com/hc/article_attachments/1500011293101/mceclip0.png" alt="mceclip0.png" width="72" height="56">


Eine Online-Rückerstattung für Ihre Bestellung leider nicht möglich ist. Diese
erfordert eine manuelle Bearbeitung. Bitte kontaktieren Sie hierfür unser
<a href="/agent/dashboard" target="_blank" rel="noopener">Kundenservice-Team</a>
unter Angabe des Grundes für die Rückerstattung. Wir werden Ihre Anfrage innerhalb
von 24 Stunden bearbeiten.


Fragen zum Produkt oder Installationsprobleme?


Sollten Sie eine Rückerstattung wünschen, weil Schwierigkeiten bei der Installation
oder bei der Nutzung der Software auftreten, könnten Sie auch zunächst technische
Hilfe vom Softwarehersteller anfragen. Viele Schwierigkeiten können von den technischen
Experten unserer Partner schnell gelöst werden. Die Kontaktinformationen zum
technischen Support finden Sie in unserer Liefer-E-Mail. Unsere meistgesuchten
Partner finden Sie
<a href="https://support.cleverbridge.com/hc/articles/202929804?article_ref=201370840">hier</a>.


Falls die Probleme auch vom Softwarehersteller nicht gelöst werden können oder
Sie keinen technischen Support wünschen, kontaktieren Sie uns bitte über das
<a href="https://support.cleverbridge.com/hc/de/requests/new?ticket_form_id=18434">Kontaktformular</a>
und wir überprüfen gerne Ihre Rückerstattungsanfrage.

Kyle Beaulieu

Apr 23, 2021

Hi Shirin,

I'm unable to view the link you sent as it's asking me to log in. However, can you please paste the source code of the article so I can take a look? I have a few ideas that might help.

If you're not sure where to find the source code, open the article in the editor and click the following icon:

This will open a new window with the source code. Feel free to paste the entire thing (as long as there is no confidential information) and I'll take a look.

Didn't find what you're looking for?

New post

Issues with spaces in an article

6 comments

Didn't find what you're looking for?

Common topics

Role-based guides

Additional resources