[Resolved] GenerateBlocks Grid CSS

[vast]

Hi there,

The current requirement is to display a 3 grid column on a desktop, 2 column with the third centered on a tablet and a single grid column on a mobile.

Displaying 3 grid columns with a width of 33% is easily achievable as is 100% for a mobile device. On a tablet, 2 columns appear at the top with a width of 50% and the third appears in the new row however aligned to the left. There doesn’t appear to be the option to center the third column using the options available in the block settings.

As there is no ability to specify a CSS attribute for each column, what is the recommendation to center the third column on a tablet?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[vast]

Sorry for not circling back sooner Leo. Since GenerateBlocks doesn’t appear to support column level attributes, we had to introduce a custom CSS selector. Hopefully it’ll be a feature in an upcoming release.

[David]

Hi there,

theres no need to add Custom CSS if you want to align the grid items. You can change the Horizontal Alignment in the Grid Container:

https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

This can be set separately for each device size.

[vast]

Thanks David. These don’t appear to support centering the last column for example.

[David]

Do you mean this?

[vast]

Hi David,

There was no other information in the post.

[David]

Are you not able to see the Image i attached above ?

Here is the URL to it:

http://devsite337160.apps-1and1.net/wp-content/uploads/2020/12/Screenshot-2020-12-13-at-01.13.14.png

[The High on Marketing]

Hii, I’m having the same issue with the Generateblocks Grid item. I was trying to create an Instagram block using a grid inspired by your tutorial on Youtube. But no luck, whatever I do gets aligned to the left by default. Please check the screenshots below:

Backend: https://ibb.co/S7qRCQc

Frontend: https://ibb.co/fkFKZWr

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

[Ying]

Hi there,

I don’t quite understand your issue, the topic starter’s issue is to align the 3rd grid item to center in a new line.

What’s your question here?

And could you open a new topic for your question with your site info? Thanks!

[The High on Marketing]

The whole 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.
.
Check out this picture: https://ibb.co/qMLHCh5

[Ying]

I can’t see where the issue coming from without seeing the code. So please do provide your site in question.

But I would guess if you have a right sidebar activated on this page?

[The High on Marketing]

The sidebar is activated but on some pages, & not on the homepage. Everything aligns to the right by default. link: ethnicnaaari.com

[Author]

Posts