[Resolved] kadence posts block not displaying properly on custom 404 page

[Brian & Nicole]

I recently created a custom 404 page using a GP Elements Block-Content Template. You can see it here:

https://stage.nicolewattcreates.com/404.php

I wanted to add in the same posts block that I have on my home page (stage.nicolewattcreates.com), so I copied the entire block and pasted it into the Content Template.

However, when I view the result, the Kadence posts block is displaying strangely, seemingly splitting each large column into 3 smaller columns. I isolated the issue to the following code:

.generate-columns.grid-33, .grid-sizer.grid-33 {
width: 33.3333%;
}

If I comment it out, the grid will return to normal size.

I have looked all up and down the entire 404 layout, and cannot see why this styling is being called. As you can see on the home page where the same exact series of blocks is displayed, it renders as designed.

I was able to recreate the post loop using GP blocks, but I would prefer to use the Kadence blocks as they maintain the 3-across columns on tablet layouts. The GP loop goes to a 2-column layouton tablet with no easy setting option like Kadence.

Thanks in advance for your help!

[David]

Hi there,

use the GB query loop block, you can set the post template width to 33% for tablet views to maintain 3 columns.
See here:

[Brian & Nicole]

Hi David – thanks for the quick reply —

That’s the way I have the GP block set (33% on Tablet view), but it does not display that way. It looks like it will on the editor preview, but in reality, it pushes the the 3rd column down to a second row.

Also, still don’t know why the Kadence block works just fine on my home page, but not on the 404 element layout. It displays in the editor as expected as well…
Editor view:

Inspector / Device view:

[Fernando]

Hello there,

Can you try adding this snippet:

add_filter( 'post_class', function( $classes ) {
	if ( is_404() && ! is_admin() && in_array( 'gb-query-loop-item', $classes ) ) {
		$index = array_search('generate-columns',$classes);
if($index !== FALSE){
    unset($classes[$index]);
}
		
	}

	return $classes;
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

[Brian & Nicole]

Yes, thanks Fernando! That fixed the GP Query block. It now renders correctly in tablet view. The Kadence Block is still not rendering properly in desktop view on the 404 page, but I don’t need it there anymore. Thanks so much!

[Fernando]

You’re welcome, Brian and Nicole!

[Author]

Posts