[SOLVED] When change .container max-width then .product-container hover doesn't work

[ojotceue]

Hello Everybody,

 

I'm new on the forum, so I would like to greet with You in the beggining.

 

I just started work with PrestaShop.

 

I would like to change width of whole page, default width 1170px seems to be to wide for me.

I changed line 990 in global.css

@media (min-width: 1200px) {
  .container {
    max-width: 1170px; }

I set up max-width to 970px and the width is ok, but there is a problem in .product-container - hover doesn't work.

 

This is screen when hover 1170px:

http://fotoo.pl//out.php?i=781827_hover.jpg

 

And hover 970px:

http://fotoo.pl//out.php?i=781826_hover970.jpg

 

When .container max-width is set up to 970px nothing display when product is hover.

Buttons "Quick viev" , "Add to cart" and "Viev" doesn't display.

 

Could you help me to solve it?

Edited May 5, 2014 by ojotceue (see edit history)

[vekia]

any chance to see it live somewhere?

[ojotceue]

Sorry I cant give a link because I'm working on localhost at this moment.

But in my case that situation occur in every fresh Prestashop installation.

 

For example- I install new one test installation and change only line 990 in global.css (set up to 970px), nothing more- the problem with product hover appears.

 

If it's neccesary I can install test version on server.

 

Regards

[ojotceue]

Here is the link to see it live: test.wrotniak.pl

 

I have change only line 990

[falkor]

if ($('body').find('.container').width() == 1170)
{
   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');
   $(this).parent().css('height', pcHeight + pcPHeight).css('margin-bottom', pcPHeight * (-1));
}

global.js - those lines are probably guilty. Try to change 1170 to 970.

[ojotceue]

Thank you. You are right. The solution is change 1170 to 970 in two lines- 138 and 148 in themes\default-bootstrap\js\global.js.

function blockHover(status)
{
	$(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){

		if ('ontouchstart' in document.documentElement)
			return;
		if ($('body').find('.container').width() == 970)
		{
			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');
			$(this).parent().css('height', pcHeight + pcPHeight).css('margin-bottom', pcPHeight * (-1));
		}
	});

	$(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
		if ($('body').find('.container').width() == 970)
			$(this).parent().removeClass('hovered').removeAttr('style');
	});
}

Now the hover effect works correctly.

 

Thanks a lot

Edited May 5, 2014 by ojotceue (see edit history)

[HeadMaster]

Thank you very much for sharing the solution

[Atanda]

Thank you. You are right. The solution is change 1170 to 970 in two lines- 138 and 148 in themes\default-bootstrap\js\global.js.

function blockHover(status)
{
	$(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){

		if ('ontouchstart' in document.documentElement)
			return;
		if ($('body').find('.container').width() == 970)
		{
			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');
			$(this).parent().css('height', pcHeight + pcPHeight).css('margin-bottom', pcPHeight * (-1));
		}
	});

	$(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
		if ($('body').find('.container').width() == 970)
			$(this).parent().removeClass('hovered').removeAttr('style');
	});
}

Now the hover effect works correctly.

 

Thanks a lot

 

 

Hello.

 

I tried this for a wider container, e.g 1,272 but it did not work. It works when the size is smaller.

Thanks