Archived topic
Kadence Posts block columns with masonry layout
9 replies · Started by Steven on March 18, 2020
When using the Kadence Blocks post block with the masonry layout, it shows three columns in the editor, but only two in the public view.
When we switch over to the Twenty Twenty theme, the three columns are displayed as expected. If we switch to the post block's grid layout, it shows the three columns correctly.
Wondering if there's something specific in GP's theme that would be conflicting with the masonry layout. Because it works with Twenty Twenty, we figured we'd start with GP support first.
Hi there,
Have you fixed this?
I'm seeing 3 columns:
https://www.screencast.com/t/yad8cle4Wnm
Let me know :)
It may show 3 columns in some browsers/monitors. But see the extra white space on the right of the three columns? I believe the three columns are supposed to take up the entire width of the page. They do when the Twenty Twenty theme is active or when using the grid vs. masonry layout for the block.
All the code for the posts blocks is coming from Kadence block from what I can tell and I'm not seeing anything obvious unfortunately.
Have you tried activating the parent theme to test?
What if you disable the Blog module?
https://docs.generatepress.com/article/installing-gp-premium/#activate-your-modules
Yes, I activated the Generate Press theme instead of the Generate Press child theme to rule out any changes we may have made. I have a support ticket in with Kadence as well. But often with these issues it's helpful to open tickets with both vendors because it's not always clear who needs to update what with their product :)
Thanks for looking in to this.
So disabling the Blog module doesn't help either?
Disabling the GP blog module doesn't appear to affect the issue.
Ok let me know what they say.
Kadence Blocks support provided the following CSS tweak that seems to have resolved the issue:
/*Kadence Blocks posts block fix*/
.kt-blocks-post-grid-item, .wp-block-kadence-postgrid * {
box-sizing: border-box;
}I believe the first class (.kt-blocks-post-grid-item) was added for Internet Explorer backward compatibility last year. The second class (.wp-block-kadence-postgrid *) appears to fix the masonry layout issue without adversely impacting the grid layout.
Thanks for reporting back!
