0

I have set up a cover block. Inside the cover block, I have created four columns. Each of those four columns contains a cover block inside them too. In these cover blocks, each has a title, a text description under it, and then a single button. Now, because the title and the text description inside each cover block in each of the columns are of different lengths, the elements in each cover/column block are not aligned with those of the other columns. For example, the button in each column is at a different height than that of the other buttons in other cover/column blocks. I hope I am making some sense. How can I do this so that the title in each column aligns with the title of every other column and so on?

1
  • This isn't supported with the core blocks. You would need a custom block of some kind for the layout, or to use CSS to fix the height of the description so that the buttons line up. Aug 19, 2023 at 10:07

1 Answer 1

0

There is a way to do this without writing CSS but it has its limitations. The styling will have to be tailored to the content and care taken to keep it working if the content changes. You'll have to be using a version of WP >= 6.2 and nest the title, description and button within a Stack group variation. Then you can assign matching heights to every title and description. Setting the heights is a balancing act of trying to make it work at all screen sizes (to account for heights necessarily increasing in narrower screens with more text wrapping) versus how you'd like it to look at any certain screen size.

Here’s an example you can paste into the block editor.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.