nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to synchronize two columns with respect to same headings?

Mika Huttunen

I have two column help page, other with text and other with illustrating pictures. The text and the pictures connected together have the same heading. Is it possible to have these two same headings synchronized so that when you reach the heading X with the text, the pictures below the same heading X are synchronized to the same level vertically?

Accepted answers

Thomas Schlegel

Hi Mika,

I would do that with a new section for every heading.

Every section has in its left column the heading and the text, in the right column you should place the pictures for that subject.

With different sections on your page, you can assure that the picture in the right column of your section is on the same vertical level as your text.

All comments

Thomas Schlegel

Hi Mika,

I would do that with a new section for every heading.

Every section has in its left column the heading and the text, in the right column you should place the pictures for that subject.

With different sections on your page, you can assure that the picture in the right column of your section is on the same vertical level as your text.

Mika Huttunen

Hi Thomas,

Thank you!

I probably was doing something too complicated from the beginning!

Best Wishes,

Mika

Thomas Schlegel

You're welcome @Mika Huttunen.

If you think your question is answered, please mark it with the checked marker. With such a marker, other users may find answered questions more easy.

Thank you.

Mika Huttunen

Hi Thomas!

I'm sorry for that I did not mark it in the first place.

Now it is done!