[Resolved] Incorrect display of styles when using GeneratePress elements.

[Brightest Media Sp. z o.o.]

Hello,

I have a problem related to the incorrect display of styles for some elements on my sites. I am using GeneratePress Premium and GenerateBlocks Pro.

So the issue is as follows.
When I add a custom footer using the Elements tool found in GeneratePress. I add the footer as a block and embed the latest posts in it using GenerateBlocks and more specifically Query Loop for the latest posts.

After publishing such a footer usually as on the home page or categories there are also blocks added in GenerateBlocks related to Query Loop then the footer styles or content on the page are not displayed correctly.

Exactly it looks like this:
There are blocks created on the home page using GenerateBlocks entries based on Query Loop – https://gp13.demo.brightestmedia.pl/ and the footer in this case displays incorrectly. The posts are one after another and should be in columns.
The footer should look like this – https://prnt.sc/lWrfmmn5jfn8 – this is how it is created in the admin panel.

However, the footer returns to the correct appearance when we clear the entire home page and leave the footer alone.

Example two – the category page:
In this case we have a category page also created using the Elements tool found in GeneratePress – https://gp13.demo.brightestmedia.pl/category/parenting

In this case, the footer displays correctly, but the category styles do not look as they should. They should look like this – https://prnt.sc/S2tNN_BFd_p-

This website has the latest version of GeneratePress and GenerateBlocks. The websitesite comes with an active license key for GeneratePress Premium and GenerateBlocks Pro.

On the website I mapped the problem – https://gp13.demo.brightestmedia.pl/ I have only the GeneratePress theme and only the plugins responsible for GeneratePress Premium and GenerateBlocks. There is no possibility here that there is a conflict with other plugins. https://prnt.sc/BncszzppHd6F https://prnt.sc/6wIdtlM-Jy1U

Please let me know what we can do about it. I can also give you access to this website so that the situation can be thoroughly verified.

I also reproduced the problem on a local host, so this is a general problem and does not affect a single website.

[Leo]

Hi there,

It might be this issue here: https://docs.generateblocks.com/article/unstyled-content/

Can you give the solutions a shot?

Let me know 🙂

[Brightest Media Sp. z o.o.]

Hi Leo!

I checked the docs you sent me, but this problem occurs only when I add posts created with GenerateBlocks using query loop to the footer.

The site does not have any plugins and the GeneratePress theme without any modifications (I sent in a previous message screenshots of what plugins and themes I have).

The best thing to do is to check this problem yourself and you will see that after disabling the footer the problem disappears. If the footer is enabled with these settings then if there are other elements in the site created also with query loop then a conflict arises and the styles of some elements do not display correctly.

I added the login information in a private information. You can test everything on the site (remove, add plugins, etc.) this is a test site, so don’t worry about anything.

[David]

Hi there,

the issue is due to duplicate Class IDs.
Each block you add is given a unique classs e.g gb-grid-column-a5958d80 this example is the class for the 1st article in your footer post loop.

If I search the DOM in the browser developers tools for that class, i see it is also present on many of the query loops items in the content of the home page.

This causes a CSS conflict, ie. all those duplicate classes end up with the same style.

This happens if a block is copied from one post into another post ( including elements ) as WP cannot generate new unique class.

So if you need to copy a block to a new post or element make a Duplicate of it first and the cut and paste the duplicate.

A quick fix for the footer, is to select the Query Loop, Duplicate it, and then delete the original.

[Brightest Media Sp. z o.o.]

Hi David,

I did exactly as you wrote and the problem no longer occurs.
I didn’t think about that when copying the blocks, that it might cause a conflict with the same ID.

Thank you very much for your help!

[David]

You’re welcome

[Author]

Posts