[Resolved] Proper vertical alignment between containers

[Chintan]

Hi

I’m creating a page using GP premium where I can’t seem to fix the vertical alignment between two containers: https://ibb.co/5T1923P. Can you please help with the relevant changes I need to make? Thank you 🙂

[Leo]

Hi there,

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

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Chintan]

I shared it in the private info field 🙂

[David]

Hi there,

are you wanting to align the columns from the different containers ?

[Chintan]

Yep I want the text to appear visually aligned vertically, so I guess that would be the columns, right?

[David]

Ok, so if i look at Writing Tools and Freelance Tools – which one of those is ‘correct’ ?

[Chintan]

I think you mean the “Freelance Writing” section, and that’s what I want the whole page’s containers to appear like. Essentially I want them to be centrally aligned on the page.

[Ying]

They should be aligned automatically if you deactivate the align full option for GB container blocks.

But I guess you want each container’s background color extended to the edges, is that the case?

If so, try the following steps:

1. Disable all the align full option for GB container blocks.

2. Set the page’s content container to be full width. You can do so using the layout meta box, you can find it here in the page editor:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

3. I noticed that you have a layout element activated on this page which sets the content container to 800px, I would recommend excluding this page from the location of that layout element.
https://docs.generatepress.com/article/layout-element-overview/

[Chintan]

Thanks much. That worked 🙂

[Ying]

Glad to hear that 🙂

[Chintan]

Hi Ying,

I am still struggling here with the vertical alignment. I have shared the screenshot with details of what I want to achieve and the page link. Can you please help? Thank you!

[Fernando]

Hi Chintan,

To clarify, are you looking for something like this?: https://share.getcloudapp.com/ApuXWK2X

If so, try setting the alignment of the Container Block holding the Grid Block to center.

If you’re trying to move them to the center, with the text still position at the left, you can try doing it through spacing.

Otherwise, you might need custom CSS for this. Try inserting the Paragraph Blocks within a Container Block, and I’ll see what I can do.

Hope to hear from you soon.

[Chintan]

Hi Fernando,

“If you’re trying to move them to the center, with the text still position at the left, you can try doing it through spacing.”

Yep, this is what I want to, not what you show in the screenshot 🙂

By spacing do you mean using the horizontal and vertical gap present in grids? I tried that, but it doesn’t seem to work.

[Fernando]

Try adding Padding to the Container Block within the Grid Block. 🙂

Example: https://share.getcloudapp.com/mXux4Zzk

[Chintan]

Thank you. I tried that and it worked for desktop. But the mobile version of the page now is behaving weirdly in terms of alignment, and using the padding for right or left doesn’t seem to align the text. Can you please help?

[Author]

Posts