Hi There,
This is what I am seeing at the moment:
It will depend on the screen size. There’s two column side by side. Take note that being responsive, the left part which is text mostly, on smaller screen size will need more height to accommodate entire content. When it increase height, the entire ROW will increase it’s height. Since the image on the right column will not grow larger, we can see the extra space below the image. To fix this, we need to make sure that those 2 columns will always have the same height. We can achieve that by adding the following JS code:
jQuery(document).ready(function($) {
var max = 0;
$(".home #x-section-1 .x-column").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".home #x-section-1 .x-column").css('height', max);
});
Once they have same height, we can now position the image on the bottom of the column. On the right column style field add position: relative;
. Then on the image style field, add position: absolute; bottom: 0; left: 0; right: 0;
Then for the product page issue, remove the code you have added on the child theme if you want the newer version.
Hope this helps.