Archived topic

Create 2 columns with backgrounds of equal height, no matter the text length

3 replies · Started by Jason on August 4, 2021

Viewing posts 1–4 of 4

August 4, 2021 at 10:11 pm #1884399

My goal for the site: create two columns where the background color is equal height, no matter where the text ends.

My structure so far is:

I would like a margin (default is 40px, which is fine) around all four sides of the text. I also want there to be padding between the bottom of the column margin and the next object (in this case a button).

I am close to this working, but currently, it seems like the 'Add block' selector is actually pushing the rest of the objects down the page.

Please advise, and thanks in advance!

Jason

August 5, 2021 at 2:27 am #1884607

Hi there,

i would recommend using the GenerateBlocks plugin for this kind of thing.
The Grid Block has same height columns by default:

https://docs.generateblocks.com/article/grid-overview/

Whilst still allowing to to align the inner content:

https://docs.generateblocks.com/article/container-overview/#layout-–-grid-item

August 5, 2021 at 4:28 am #1884719

Hi David,

I had played around with the Grid Block but was trying to accomplish this using a block with default settings.

After reading the documentation on Grid Blocks, adjusting a few of the settings was no issue, especially since the 'Duplicate Grid Item' functionality exists. The 'Vertical Gap' was the final issue. Anyway, that is all now resolved, and Grid Block is just what was needed!

Thanks!

Jason

August 5, 2021 at 4:45 am #1884738

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.