skip to Main Content

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. I just review your website you have to add height: 100% in few elements. There are 2 options to resolve your issue.

    Option 1: Add Height 100% Class or Inline CSS in below mentioned elements.

    enter image description here

    Option: 2 Add below CSS in style.css file.

    .et_pb_image {
      height: 100%;
    }
    .et_pb_image_wrap {
      height: 100%;
    }
    .et_pb_image_wrap img {
      height: 100%;
    }
    

    I hope it’ll resolve your issue, Thank You

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search