Ad Hover effect on Product Grid List for smaller content size.

[mastek]

Hello, at first I want to apologize for my english but i will try to explain what problem i have

 

Generally speaking, I would like to run  "Hover" effect of products for smaller content size on Product Griud List in Homepage and Product List page. I marked everything in the picture on the attachment below.

 

From what I know the "Hover" effect works only for content above 1170px, and I would like it to work also for content with a width of 970px.

 

In global.js I see this code (below) and I think it's responsible for this effect, but when changing the value 1170 to 970 - the effect stops working at all resolutions

function blockHover(status)
{
	var screenLg = $('body').find('.container').width() == 1170;
 
	if ($('.product_list').is('.grid'))
		if (screenLg)
			$('.product_list .button-container').hide();
		else
			$('.product_list .button-container').show();
 
	$(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){
		if (screenLg)
		{
			var pcHeight = $(this).parent().outerHeight();
			var pcPHeight = $(this).parent().find('.button-container').outerHeight() + $(this).parent().find('.comments_note').outerHeight() + $(this).parent().find('.functional-buttons').outerHeight();
			$(this).parent().addClass('hovered').css({'height':pcHeight + pcPHeight, 'margin-bottom':pcPHeight * (-1)});
			$(this).find('.button-container').show();
		}
	});
 
	$(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
		if (screenLg)
		{
			$(this).parent().removeClass('hovered').css({'height':'auto', 'margin-bottom':'0'});
			$(this).find('.button-container').hide();
		}
	});
}
 

Can anyone help me with this issue, thanks in advance for any help.

[mastek]

Ha, When I was typing I came up with an idea and it work

 

Just change it:

var screenLg = $('body').find('.container').width() == 1170;

to:

var screenLg = $('body').find('.container').width() >= 768;

There will be a slight improvement in CSS But problem solved.

Thanks for the help, as always I could count on you