Support » Plugin: AMP » Strange issue: Paragraph break removed in AMP version of post

  • Resolved Julius E

    (@julius-e)


    Hi, I was wondering if you could help with an issue we’re experiencing on our AMP pages.

    On every post, the paragraph break is removed resulting in the second and third paragraph always being stuck together. To illustrate what I mean: Our posts start with h4 summary, then there’s a first paragraph, second paragraph etc. Between the first two plain text paragraphs (i.e. after the h4 summary) the break is removed, resulting in the two paragraphs being stuck together.

    This happens on every AMP post. Any idea what might be the issue?

    Many thanks in advance!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support James Osborne

    (@jamesosborne)

    Thanks for reaching out. If you’d like to share an example page with this behavior we’d be happy to investigate this for you. If you’re using AMP in standard mode you can temporarily switch to transitional mode so we can compare both versions.

    If you prefer to share privately you can use this form.

    Thread Starter Julius E

    (@julius-e)

    Hi James, thank you for your reply. I’ve just submitted all the relevant info on the private form you linked to. Many thanks in advance.

    Plugin Support James Osborne

    (@jamesosborne)

    Many thanks for sharing, very useful information. It looks like the first paragraph within your content is formatted differently to the others, and not wrapped within a <p> tag, you’ll find an example here.

    I’ve checked the demo of the theme you have active and I didn’t notice the same issue. Do you know if there is a dropcaps feature of your page builder active?

    Thread Starter Julius E

    (@julius-e)

    Hi James, ah yes in fact most of our articles have a drop cap on the first content paragraph. It never occurred to me that might be the issue. Is there a workaround do you think or do we have to omit them? Many thanks again.

    Plugin Support James Osborne

    (@jamesosborne)

    In your non AMP URLs there seems to be an empty paragraph. Are you using a page builder or particular block for these paragraphs using a dropcap? Let me know and I’ll check for any possible solutions or workarounds.

    Thread Starter Julius E

    (@julius-e)

    No, just a theme shortcode [dropcap style=square][/dropcap] from the editor. Unfortunately the theme hasn’t been updated by the developer for Gutenberg so we’re still using the classic editor plugin until they update it.

    There is an option in the theme settings called ‘make first paragraph larger’ (i.e. as a summary paragraph) but toggling that on or off doesn’t seem to have an effect on the problem with the amp pages. Hope this helps, and thanks again.

    Plugin Support James Osborne

    (@jamesosborne)

    Have you tried the spacer block, or the Atomic Blocks or other spacer blocks? If so you can set it’s height to 0px by default (as it’s not occurring in your non AMP URLs, with an empty paragraph accounting for the space).

    To ensure there is a defined space for that block in your AMP URLs you can apply a class name, such as amponly. After doing so you can define a height of 10px for that block in your AMP URLs only, using a rule similar to the below (the below example works for the Atomic Blocks spacer block):

    [amp] .ab-block-spacer.amponly {
        margin: 0 0 10px 0;
    }

    The [amp] selector above ensure it applies to AMP URLs only.

    The above code snippet assumes you’re using the plugin in transitional or standard mode AMP. We have a section on adding custom CSS for all modes on the plugins website.

    Let me know how you get on, or if you need any assistance with the above.

    Thread Starter Julius E

    (@julius-e)

    No blocks I’m afraid, as I mentioned before the theme creator hasn’t updated for Gutenberg yet. So we’re forced to use the classic editor plugin unfortunately, no option for nice blocks for now.

    Plugin Support James Osborne

    (@jamesosborne)

    I see. In that case you could include a <hr class=”amponly”> element after each paragraph that features a dropcap. Then add the following CSS, which would only add the 10px height to your AMP URLs only (in transitional and standard mode)

    hr.amponly{
    	height:0px  
    }
    [amp] hr.amponly{
    	height:10px;
    }

    Let me know how you get on anyway.

    Thread Starter Julius E

    (@julius-e)

    Many thanks James, I’ll give it a try

    Plugin Support James Osborne

    (@jamesosborne)

    Sure, let us know how you get on.

    Plugin Support James Osborne

    (@jamesosborne)

    As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Strange issue: Paragraph break removed in AMP version of post’ is closed to new replies.