I have in a page a multiple column layout (in my case 5 columns, but that doesn't really matter). In each column, I have a heading, then an image and then some text, so like so: Heading 1 Heading2 Image 1 Image2 Text 1 Text2

However, the headings are too long to fit on one line, so sometimes they have to be broken into 2 or even 3 lines. Because the headings are different, this in effect causes the images to be at a different vertical position.I would like for all of the images to be at the same vertical position - basically in line accros all the columns.

The only idea on how to do that was to use 2 "Columns" blocks, one for the headings, another for the images and the text. That however doesn't really work on mobile, because there I want it like this: Heading 1 Image 1 Text 1 Heading 2 Image 2 Text 2

and having two separate column layouts would print both headings first, followed by the rest of the content.

I am open to using hand-written CSS or JS, but I don't have a clue how... My theme is GeneratePress if that is of any use.

I have in a page a multiple column layout (in my case 5 columns, but that doesn't really matter). In each column, I have a heading, then an image and then some text, so like so: Heading 1 Heading2 Image 1 Image2 Text 1 Text2

However, the headings are too long to fit on one line, so sometimes they have to be broken into 2 or even 3 lines. Because the headings are different, this in effect causes the images to be at a different vertical position.I would like for all of the images to be at the same vertical position - basically in line accros all the columns.

The only idea on how to do that was to use 2 "Columns" blocks, one for the headings, another for the images and the text. That however doesn't really work on mobile, because there I want it like this: Heading 1 Image 1 Text 1 Heading 2 Image 2 Text 2

and having two separate column layouts would print both headings first, followed by the rest of the content.

I am open to using hand-written CSS or JS, but I don't have a clue how... My theme is GeneratePress if that is of any use.

• css
• block-editor
• columns

Share Improve this question asked Sep 30, 2019 at 14:49 Marek DědičMarek Dědič 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This is more of an html question but, you'd have to write a theme, or at least a child theme.

An absolutely terrible way to do this would be with tables ... but, that'd probably be the easiest way. Something more like this would be sufficient:

<div class="row">title 1, title 2</div>
<div class="row">image 1, image 2</div>