Search code examples
htmlcssdivi

Divi - How to vertically align stacked images in columns, within in a section


Guys I cannot for the life of me figure out how to vertically align the images in this section. See the Divi builder screen shot here

I've aligned them with an aspect ratio that would make them the same height but unfortunately the 20px padding in between the right images is making them protrude. This is happening on all of my sections!

The uneven images

Please help!! I cant find a solution that works anywhere! :/

Website URL: www.tessa-jane.com


Solution

  • Use align-items: flex-end; on flexbox.

    @media (min-width: 981px)
    .et_pb_row.et_pb_equal_columns, .et_pb_row_inner.et_pb_equal_columns, .et_pb_section.et_pb_equal_columns>.et_pb_row {
        display: -ms-flexbox;
        display: flex;
        direction: ltr;
        align-items: flex-end;
    
    }
    

    But keep in mind the main issue is the height of the image needs to be increased. When you align the bottom (the problem in the picture) the top becomes offset. I would suggest increasing the height of the image also. But this at least fixes the bottom portion.