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.
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.
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?
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.
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.
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.
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.
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.
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.
Many thanks James, I’ll give it a try
Sure, let us know how you get on.
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.
