Adding Block Element Under Featured Image Not Working

Hi there,

in the Element, below where you select the Hook, change the Priority to 15

The featured image is also hooked into the generate_after_entry_header in your layout. By increasing the priority your element will appear after it.

Thanks, that's now showing in the right place. Can you please let me know how to reduce the gap between the bottom of the featured image and the disclaimer box? Also, The disclaimer only seems to be showing up on desktop view. When I check on mobile it's not displaying (despite clearing caches). Thanks

This CSS:

.single-post.post-image-below-header.post-image-aligned-center .inside-article .featured-image {
    margin-bottom: 0.5em;
}

Its showing ok on my mobile, it could be an ISP/Router cache causing some pain. Can you test on a different network ?

Hi, The disclaimer element is now showing on mobile, thanks. However, the grey box / background is only showing on the desktop version, not mobile? In the GenerateBlocks Element editor it shows OK for Desktop / Tablet / Mobile?

Hi Simon,

When you say the grey box, do you mean the table of contents?

If so, it does appear on mobile:
https://www.screencast.com/t/cR3VqJxMr

Let me know if I miss anything.

Hi, No its the disclaimer box under the featured image. See here https://imgur.com/a/SQCL0Br

Oh it doesn't show the grey background on my end, neither on desktop or mobile.
https://www.screencast.com/t/jPzKHmm0WHb4

If the style shows on backend but not on frontend, make sure the cache is cleared.

Caches have been cleared, several times now. But I've just noticed it also doesn't work on Safari desktop or Firefox desktop. (I'm assuming your screenshot was also safari (Desktop)? But although it works on Chrome desktop it's not working on the mobile Chrome browser. Are there any workarounds to make having the grey background cross-browser compatible?

Hi Simon,

The issue is not browser related. It seems that the issue stems from WP Rocket. I tried viewing the site with and without WP rocket and here are the results:

With WP Rocket: https://share.getcloudapp.com/BluGQv66

Without WP Rocket: https://share.getcloudapp.com/p9uOr2mA

As shown, the “grey box” is appearing when WP Rocket is disabled.

You can test this out by adding ?nowprocket at the end of the link as I’ve done.

Moreover, you may also test this by temporarily disabling WP Rocket.

With that said, since we know the WP rocket is the issue, can you try clearing its cache again? If that doesn’t work, can you try disabling its optimization/caching functionalities one by one and see which specific functionality in WP rocket is causing this.

Lastly, to be sure, can you also clear your CDN’s cache: https://share.getcloudapp.com/NQulKAGE

Kindly let us know how it goes.

Many thanks. It was the WP Rocket caching that was the issue. Using the cache clear in the top menu bar within WP did not seem to be doing the trick but bizarrely it worked when I used the cache clear from within the settings area plus the clear used CSS.

Issue resolved, thanks.

You’re welcome Simon! Glad that the issue has been resolved!