Classic Cards text paragraph breaks not working

[SyncInteractive]

Hi there,

I’m using Classic Cards in several sections of the website over at: http://www.syncinteractive.co.uk/rolloverhotdogs (see the hotdogs, gourmet dogs, and equipment sections).

However the paragraph breaks are not working, so you can see i have several bullet points, but the spacing between the first break never displays, however it does for all others after that - as you can see from the screenshot. Any ideas what the issue is or what I can do to fix this?

Thanks for your time.

[Alaa]

Hi SyncInteractive,

The classic cards textarea supports HTML codes but to get them rendered correctly it’s advised to use “inline elements” only, so to create one example for you I’m going to use <span> and <br> inline elements, wrapping every bullet with its own <span> tag then adding <br> after each line inside the <span> so you get something like this:

<span>
	• Bigger version of our Grab &amp; Go Warmer. Easy fill with 4 hour hold time.
</span>

<span>
	• Capacity:
		<br/>
		Medium: 40 Hot Dogs in foil bags.
		<br/>
		Large: 70 Hot Dogs in foil bags.
</span>

<span>
	• Dimensions:
		<br/>
		Medium: 457h x 400w x 710d.
		<br/>
		Large: 790h x 400w x 714d.
</span>

<span>
	• Self Serve.
</span>

The example I mentioned above is to make it clear for you how the structure is written, but actually, you need to avoid using blank lines in this textarea, so the final code you can use is something like this:

<span>• Bigger version of our Grab &amp; Go Warmer. Easy fill with 4 hour hold time.</span><span>• Capacity:<br/>Medium: 40 Hot Dogs in foil bags.<br/>Large: 70 Hot Dogs in foil bags.</span><span>• Dimensions:<br/>Medium: 457h x 400w x 710d.<br/>Large: 790h x 400w x 714d.</span><span>• Self Serve.</span>

It’s the same but just one line, then you can add this CSS code to (X > Theme Options > CSS) to control the margin between each <span> (or line in your case):

.x-face-text span {
    margin: 20px;
    display: block;
}

Thanks.

[SyncInteractive]

You sir, are a legend

Thanks so much for the quick comeback, that works perfectly!

Thanks again and have a great weekend.

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!