Public preview fade out effect removes spaces between paragraphs

Themes
1

Hi,

I have successfully set up a “fade out” effect for my public preview CTA.

It works fine but I’m struggling to solve an issue with how the text is displayed: the spaces between my paragraphs are missing (see picture).

firefox_Z3gCthDHNQ
firefox_Z3gCthDHNQ1232×710 248 KB

Below is the code for the content-cta.hbs file located in the partials folder:

<div class="fadeout">
    {{{html}}}
</div>
<aside class="gh-post-upgrade-cta">
    <div class="gh-post-upgrade-cta-content" style="background-color: {{accentColor}}">
        {{#has visibility="paid"}}
            <h2>This post is for paying members only</h2>
        {{/has}}
        {{#has visibility="members"}}
            <h2>This post is for members only</h2>
        {{/has}}
        {{#has visibility="tiers"}}
            <h2>This post is for members on the {{tiers}} only </h2>
        {{/has}}
        {{#if @member}}
            <a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Upgrade your account</a>
        {{else}}
            <a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">Subscribe now</a>
            <p><small>Already have an account? <a data-portal="signin">Sign in</a></small></p>
        {{/if}}
    </div>
</aside>

Below is the custom CSS in screen.css:

    /* Public Preview Fading Effect */
    .fadeout {
        -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
        mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    }

Any idea what could cause the missing spaces between paragraphs?

Thanks for your help.

2

I ultimately solved the issue by making the following changes:

<div class="fadeout">
    <div class="fadeout-content">
        {{{html}}}
    </div>
</div>
<aside class="gh-post-upgrade-cta">
    <div class="gh-post-upgrade-cta-content" style="background-color: {{accentColor}}">
        {{#has visibility="paid"}}
            <h2>This post is for paying members only</h2>
        {{/has}}
        {{#has visibility="members"}}
            <h2>This post is for members only</h2>
        {{/has}}
        {{#has visibility="tiers"}}
            <h2>This post is for members on the {{tiers}} only </h2>
        {{/has}}
        {{#if @member}}
            <a class="gh-btn" data-portal="account/plans" style="color:{{accentColor}}">Upgrade your account</a>
        {{else}}
            <a class="gh-btn" data-portal="signup" style="color:{{accentColor}}">Subscribe now</a>
            <p><small>Already have an account? <a data-portal="signin">Sign in</a></small></p>
        {{/if}}
    </div>
</aside>

And the CSS code:

   /* Public Preview Fading Effect */
    .fadeout {
        -webkit-mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
        mask-image: linear-gradient(to bottom, var(--color-black) 1%, transparent 100%);
    }

    .fadeout-content p {
        margin-bottom: 1.5em;
    }
1 Like