[Resolved] Generateblocks Grid alignment issues

[The High on Marketing]

The whole Grid section in the first image needs to be aligned in the centre just like in the third picture. But It automatically gets aligned to the right on the frontend. I tried everything but no luck.
.
Backend: https://ibb.co/S7qRCQc

Frontend: https://ibb.co/fkFKZWr

I did it on a different website & it worked but not on this one: https://ibb.co/gMmkpXC

[Ying]

Hi there,

Can you use the private information field to link us the site in question?

We can’t see the code through the screenshots.

Let me know 🙂

[The High on Marketing]

Here You go!

[David]

Hi there,

can you clear and disable your cache plugins so i can see whats going on.

[The High on Marketing]

Disabled, please continue

[David]

Can you try the following:

1. Edit the Page and make a minor change and then republish the changes.

If that fails:

2. Go to Dashboard > GenerateBlocks > Settings and change the CSS Print Method to inline

[The High on Marketing]

Still not working, David. Tried inline embedding & cache on Cloudflare as well.
Added a new heading using generateblock but still, it’s getting aligned to the right by default.

[Elvin]

Hi there,

It’s strange that your Grid block’s columns don’t have width percentage values like it should normally have.

Any chance you can let us check on the back end? You can use the private information text field to provide the credentials. Let us know.

[The High on Marketing]

Sure I can do that, please go ahead.

[Elvin]

Strange.

The quick fix or this is by adding this CSS:

#instagram .gb-grid-column {
width:33.333%
}

But this isn’t the ideal solution as we didn’t exactly find the culprit why the column sizing doesn’t work.

Can you try disabling ALL plugins except GenerateBlocks and see if it still occurs?

[The High on Marketing]

tried but still, It’s not working. Can you please take a look at the Additional CSS section in the customizer.

[Elvin]

The Grid Block’s id(html anchor) “instagram” seems to have been removed since the last time I checked.

That’s why the CSS wasn’t working.

As for the issue with the Grid Block containers:

Having a static page set as the shop page seems to break GB’s styling. We may actually have to resort to CSS as a workaround.

That said, can you put back the instagram on the HTML anchor of the grid block so the CSS provided works?

Let us know.

[The High on Marketing]

I don’t know how to write CSS, please do something about it. It’s a humble request. In addition is there a way to make a grid column for mobile devices, since my grid styling is not working.

[Elvin]

I’ve done tests and we’ve found a bug.

A static page containing GenerateBlocks assigned as a WooCommerce Shop page will break GenerateBlock’s styling.

A temporary workaround would be to replace Grid Block with the default Column block of Gutenberg editor to display your Instagram feed.

[David]

Note – if you have created a static page with content and then set that as the Woo Shop page you will find it can generate several issues. The method i provide here is the best workaround for this:

https://generatepress.com/forums/topic/woocommerce-items-shown-in-the-product-catalogue/#post-1642808

[Author]

Posts