Product Grid List - Efekt "Hover" po najechaniu na produkty - zmiana szerokosci

[mastek]

Witam,

 

Zmieniam trochę wyglądy responsywne na swoich sklepach ponieważ uważam że obecny dla szerokości 1200 jest za duży i na laptopach z rozdzielczością 1366px słabo to wygląda - wszystko po prostu jest za duże. Rozdzielczość 1366 jest aktualnie najbardziej popularną, więc jednak te wyglądy powinny być najbardziej dopasowane  - oczywiście to moja opinia

 

Dlatego robię teraz tak (zmieniam wszystko w CSS):

- od rozdzielczości 1367px content będzie miał 1170px

- a dla rozdzielczości 1366 do 992 content będzie miał 970px

 

ale pojawił się problem, chciałbym aby dla contentu 970px efekt "hover" po najechaniu na produkty na listach produktów również działał, aktualnie działa mi tylko dla contentu 1170px, potem wszystkie rzeczy od razu są widoczne.

 

Czy jesteście w stanie mi podpowiedzieć gdzie mogę znaleźć zmienne odpowiadające za uruchamianie tego efektu. Penie trzeba tylko gdzieś zmienić szerokość ale nie mogę znaleźć gdzie.

 

Z góry dziękuje za pomoc

 

 

 

 

[koening]

W global CSS stwórz zapytanie medialne z widełkami szerokości i normalnie do danego selektora dodaj hovera

[mastek]

Nie wiem czy o tym samym piszemy ponieważ tam dość dużo rzeczy się zmienia, wiec nie wiem czy zmiany tylko w CCS coś dadzą. Dodałem załącznik gdzie dokładnie pokazuje jak bym chciał aby to wyglądało.

 

Dodam że w global.js widzę taki kod (poniżej) i wydaje mi się że to odpowiada za ten efekt, ale przy zmianie wartość 1170 na inną efekt przestaje działać na wszystkich rozdzielczościach.
 

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();
		}
	});
}

[mastek]

Ok, poradziłem sobie, takie proste a tyle zamieszania.

 

Wystarczy zmienić to:

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

na to:

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

Resztę dopracować już w CSS.