Need to make images the same size

[spencey]

Demo: Home

I need to make the three images that are side by side the same size.

[ruenel]

Hello @Spencey,

Thanks for posting in! I have checked the mentioned page and I could see that you uploaded a bigger image which is also why it takes a few seconds to load the images. The easiest way to have the same image heights is to edit those images in Photoshop or any other image editing software. You may also resize it to a smaller file size of at least 800x800 as its dimensions. Once you have it resized, please upload the new images and use it in your page.

Hope this helps. Kindly let us know.

[spencey]

Is there a way using CSS to force them all the same size?

[Prasant]

Hello @spencey,

Thanks for writing in!

Please inspect all three image elements and add a class in Class field.

After that add following CSS under X > Theme Options > CSS:

.add-class-name {
    min-height: 300px;
}

Replace add-class-name with your custom class name.

Final output should look something like this:

Thanks.

[spencey]

@Prasant

.add-class-name {
min-height: 300px;
}

I added this and it didn’t work:
.add-man {
min-height: 200px;
}

[Prasant]

Hello @spencey,

Thanks for updating the thread.

You can only added the CSS .add-man { min-height: 200px; } into the theme options panel. However, you haven’t assigned the class name add-man to the image element. Though the correct CSS is there, image element does not know that. To make the image element aware of the CSS, we also need to assign the Class name that I shown in previous reply.

I have also recorded a screencast that you can take a look.

Thanks.

[spencey]

I added the class and two are showing correctly. the the first one is not.

[nabeel]

Hi @spencey,

That’s because the other two images are taller than the first one, your first image has not enough height to match the other two. Please replace your code with the following instead:

.add-man {
    min-height: 275px;
}

Alternatively you can upload all three images of exactly the same size to avoid custom CSS.

Hope this helps!