Grid layout doesn’t work in the “Top Posts and Pages” widget

My site has this problem as well. Following this thread.

@piebaribua I checked your site ; the CSS used to style that grid isn’t loaded on the page for some reason. Do you use a caching or performance plugin that may impact how CSS is loaded on your site? Do you also use code snippets to impact how CSS is loaded within the Jetpack plugin?

@ppnsteve I checked your site as well, and the problem seems to be exactly the same. I’ve replied in the other thread you started here.

Hi, @jeherve thank you very much for the response.
My site is on WordPress.com, so I have a plugin installed by them called Page Optimize.

In the past, I also added JS code so that the titles would appear under each image in the grid, and it worked perfectly without causing any issues. However, I have removed the code, and the images still do not appear in the grid.

Could you try to remove the widget, and then add it back (or add the Top Posts block instead)? Does it solve the issue?

@jeherve I’ve tried, but unfortunately, it didn’t help. I also tried adding the widget to a completely different page, but that didn’t work either. I’m not sure if it’s related, but I’m using Elementor. Elementor support referred me to you.

Could you tell me more about what you experienced, so I can try to reproduce the issue?

• Did you try to add the Top Posts & Pages Widget, or the Top Posts Block?
• Did you find the widget or the block in the inserter and get an error after adding it on the page, or was the widget / block not available?
• If you received an error, could you copy that error and paste it here?

Thank you.

Hi, I added the widget using Elementor.

It’s important to mention that after I added it, it worked perfectly for several weeks, but suddenly the grid layout switched to a single column. I didn’t receive any error message, even after deleting and re-adding the widget. Other than the grid issue, the other options (text list and image list) are working fine.

I suspect it might be something with the integration with Elementor, but I don’t have a way to check it. I tried rolling back to previous versions of Elementor, but that didn’t help.

If it helps, Elementor support mentioned that if you want to investigate this further with them, you can open an issue here, and their developers can work with you to check this: https://github.com/elementor/elementor/issues.

Thanks for looking into this. It’s really important for me to resolve this.

@piebaribua I’m not using elementor and it did the exact same thing on my site.. was working for a long time then just didn’t.. I’m more inclined to think a jetpack update borked the css or something like that. I have tried removing/re-adding the widget as well as the plugin, and still no joy as well.

@ppnsteve It’s somewhat reassuring to know that this bug isn’t only happening to me. Are you by any chance using WordPress.com? I currently have another bug with a different Jetpack widget, and their support team is handling it since it seems to be an issue on their end.

@jeherve Is there any update? thank you.

@piebaribua I’m not using wordpress.com
I think it’s a Jetpack update thing.. but no way to tell from my end as we have plugins set to auto-update.. so no Idea when last update was. I do know it started about the same time as yours did without changing anything on the site.

I looked into it, and found the source of the problem when using Elementor.

Until Jetpack version 13.9, we loaded a concatenated jetpack.css file on all pages of your site, as soon as you were using specific Jetpack features like the Extra Sidebar widgets. That CSS file included the necessary CSS to style the Top Posts Widget.

Starting in version 13.9, we stopped loading that concatenated CSS file, and instead opt to only load each widget’s CSS when that widget is included on the page. On other pages, that CSS will not be added.

While that works well in most scenarios, it doesn’t work when the widget has been added inside the Elementor editor ; it seems the Elementor editor does not inform WordPress of the different widgets that may be added on each page.

I let the Elementor team know about the problem in this issue:

https://github.com/elementor/elementor/issues/29010

For now, I would recommend that you manually add the widget’s CSS to your theme, by pasting CSS from this file into your Elementor Custom CSS settings if you use Elementor Pro, or the WordPress CSS editor under Appearance > Customize > Additional CSS.

Let me know how that goes.

Hey @piebaribua,

Do you have updates about that, do you still need help? We usually close inactive threads after one week of no movement, but we want to make sure we’re all set before marking it as solved. Thanks!

Hey, sorry for not replying. The code indeed helped! Thank you so much; I really appreciate the help. How can I know if it will be fixed with Elementor? So I’ll know if I need to remove the code once the bug is fixed. Thanks!

@piebaribua I would recommend that you subscribe to the GitHub issue I linked to earlier, and follow the conversation happening there. Once the Elementor folks fix the problem, the issue will be closed.

The good news is, we also implemented a work-around in the Jetpack plugin last week, so you will be able to remove the code as soon as the next version of the Jetpack plugin becomes available, on Tuesday, November 5.