Docs

[logan163]

Hello X Team

Another beginner question from me!

I have two images of the same height, one is a different width. I want the column container on but this means they don’t display as the same height. (They display fine with the column container off)

I’m using 2/3 and 1/3 column:

2/3 column has this image:

760 (w) by 380 (h)

1/3 column has this image:

380 px by 380 px

But the 380 by 380 image appears shorter. How can I get them both the same height?

thank you 🙂

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[logan163]

This reply has been marked as private.

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.home #x-section-2 img {
    height: 100% !important;
}
.home #x-section-2 .x-img {
    margin-bottom: 0 !important;
}

Let us know how this goes!

[logan163]

Thanks for your reply, but that simply stretches the image.

Can I not increase the whole container for the columns within that row?

thanks!

[logan163]

Update: If I set the style of the smaller image to width/height 100%, then both images line up, BUT now you can clearly see a difference in the image quality, because when I inspect the larger image it states size as follows:

719 × 359 pixels (Natural: 725 × 362 pixels)

725 x 362 being the actual size of the image and the size I would like to display as!

So that’s why I am thinking if I just make the container wider for that row it will fit them both at 100% right? Can I do that/how do I do that?

Thanks 🙂

[Christopher]

Hi there,

Please add width: 95%;max-width: 95%; in row’s style field.

Hope it helps.

[logan163]

Thank you Christopher, that does correct the image height but now they are spaced very far apart in the row when viewed on desktop.

Would I be better off trying to do this with Essential Grid?

thanks

[logan163]

This reply has been marked as private.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

@media screen and (min-width: 1500px){
.home #x-section-2 .x-container.max {
    max-width: 1800px !important;
}
.home #x-section-2 .x-container.width {
    width: 98% !important;
}
.home #x-section-2 .x-img {
    width: 100% !important;
}
}

The images you’re using are very low in resolution. To display your images correctly in higher resolution you should upload the high resolution images.

Thanks!

[Author]

Posts