How to align different sized div's in a pyramid

Hey all,

I’m trying to construct a pyramid, where there is a line of text next to each section. I would normally just use an image, but I’m trying to do a mouseover effect on hover.

How can I get the pyramid parts to line up correctly? Each one is an image in a separate div, next to the text.

Thanks,

Hugo

Here is my site Read-Only: https://preview.webflow.com/preview/innovate-wealth?utm_medium=preview_link&utm_source=designer&utm_content=innovate-wealth&preview=517a2ae0989d11bb807a8fd291010aae&pageId=5f396c223773e4425e416a8d&mode=preview
(how to share your site Read-Only link)

One way I can think of is have the entire pyramid in a column, set it to flex and align to center. Now they should have the basic pyramid shape. Then, play with paddings/margins to remove the gap between the “levels” of the pyramid.

1 Like

I would only make the pyramid sections as image elements, and add the text in webflow to make the images smaller and therefore, the website would load faster. My procedure would be:

  • Create a primary div (referred to as pyramid wrapper).

  • Set that div to flexbox horizontal and, depending on your needs, probable center align or left align.

  • Place two divs inside the pyramid wrapper, one will go left an the other right, referred to as image wrapper and text wrapper respectively.

  • Set them both to flex vertical. Set the image wrapper to center align and the text wrapper to left align.

  • Place 6 image elements in the image wrapper and select the corresponding image (You can play with margins to give them more or less spacing).

  • Place 6 paragraph elements in the text wrapper and write the corresponding text.

  • Give each paragraph a negative left margin to set the position you desire, and play with bottom margin to give them the correct spacing.

Hope this helps!