Same height for images

Hi there,

I have a split column row that I have two images side by side. One of the pictures is slightly bigger than the other and I can’t seem to figure out how to set a custom css to set the height and width of those images so they are the same size. I tried following this thread https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272 but that also didn’t seem to work; possibly because it just adjusts to the tallest photo. Any thoughts or suggestions?

Hi Jace,

Thank you for reaching out to us. I tried to check your site but it’s password protected currently so couldn’t inspect the issue, however you can try out the following method to make images of same height. First give your section a class equal-height-images that has the images

Then add the following code in the Theme Options > CSS:

.equal-height-images .x-column {
  display: flex;
}
.equal-height-images .x-column:first-child .x-image {
  flex:0.5;
}
.equal-height-images .x-column:last-child .x-image {
  flex: 1;
}

Make adjustments to the flex values as per your need to make them same height. You can also follow this guide for more help https://kartikprabhu.com/articles/equal-height-images-flexbox or checkout a pen here https://codepen.io/blimpage/pen/obWdgp with multiple examples.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

Thanks for your reply! I’ve followed the steps to add the CSS you provided on my global CSS under the theme options. I’ve also added the custom class to the row I’m currently trying to edit. I’ve turned off security for the site so you should be able to see now. I’m currently working on the Team page, where the Leadership photos will be bigger and then the Consultants row below will be slightly smaller sized. I’ve tried following the additional links you provided but I’m just not sure what I’m missing.

Hey Jace,

Thank you for turning off the security, I checked your team page and to make images of same height in a row would require custom scripting, I see you’ve already added the class equal-height-images to your row so you can now add the following script in the Theme Options > JS:

(function($){
  $(window).on('load resize', function() {
	max = 0,
    $(".equal-height-images .x-column").each(function(index, el) {
      mobile = $(window).width();
      if ( mobile > 767 ){
        if( $(this).find('img').height() > max ){
			max = $(this).find('img').height();
		}
      }
      $(this).find("img").css('min-height', max);
    });
  });
})(jQuery);

Please note that the code provided above serves as a guide only and is to help you in getting started so issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

Well the code you provided worked, however, it looks like the smaller image was stretched to fit the size of the bigger one. I kind of figured it would go the other way. I might have to rethink the design of this section.

Sure, the current design isn’t meant for full-height and the workaround is only recommended for specific setup Hence, it would still fail for some.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.