How to make side by side images the same height?

[mochasarah]

I’m trying to design the homepage for my new website using page builder.

I did a test run inserting two images for a page layout of 2/3 and 1/3. The current dimensions of the 2/3 image are 1600 x 800 and the 1/3 image 800 x 800.

But the attached is what they look like on the front end …

How do I get them both to be the same height? Should the images be smaller in size perhaps?

Following some advice, in the image on the left I added this in the extra class: home-image-left and the image on the right: home-image-right

I then added the following code into Theme Options > General Options > Custom CSS

home-image-left {
width: 100%;
height: 800px;
background-image: url(‘stairs-test.jpg’);
background-repeat: no-repeat;
background-size: contain;
}

home-image-right {
width: 100%;
height: 800px;
background-image: url(‘homepagetest.jpg’);
background-repeat: no-repeat;
background-size: contain;
}

However, this hasn’t made any different to the proportions of the images at all.

How do I get these two images in proportion?
Thanks in advance for your help and advice!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.spb_single_image img {
    max-height: 365px !important;
}

Thanks
Mohammad

[mochasarah]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please remove the last code and use this new code:-

.spb_single_image img {
    max-height: 300px !important;
}

Thanks
Mohammad