OpenCart Community

OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/

Blank spaces in product pages

https://forum.opencart.com/viewtopic.php?t=167611

Page 1 of 1

Blank spaces in product pages

Posted: Fri Sep 09, 2016 4:21 pm
by NrealTraf
Hi Everyone,

Any ideas on how to remove the gap in between the products? Appears to be displaying products in batches of 4.

Image

Many thanks.

Re: Blank spaces in product pages

Posted: Sat Sep 10, 2016 12:29 am
by cyclops12
Not sure what version you have but This may help you out

Re: Blank spaces in product pages

Posted: Wed Sep 28, 2016 5:24 pm
by NrealTraf
Thanks for the link, unfortunately it has not resolved the issue.

The opencart version is 2.0.2.0.

Could it be an issue with the template?

Many Thanks

Re: Blank spaces in product pages

Posted: Wed Sep 28, 2016 8:03 pm
by IP_CAM
in my OC v.1.5.6.5, by use of a modified OC-2 Theme, after playing around some time with this, in:
view/theme/*/template/product/category.tpl
somewhere around Line 95 ( OC v.2.2 )
I changed:

Code: Select all

<div class="row">
<?php foreach ($products as $product) { ?>
<div class="product-layout product-list col-xs-12">
to:

Code: Select all

<div class="row">
<?php foreach ($products as $product) { ?>
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">
to make it look like here:
http://www.gratis-anzeiger.com/shop/ind ... ry&path=18
---
I also tested it by use of this:

Code: Select all

<div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6">
but it's relatively difficult, to make it look SWELL in all resolutions, just to mention this ! :D

Ernie

Re: Blank spaces in product pages

Posted: Thu Sep 29, 2016 2:09 pm
by opencartboost
Please provide your website link in order to look closer.
Without know your code that is very hard to solve your problem.

Re: Blank spaces in product pages

Posted: Thu Sep 29, 2016 4:42 pm
by NrealTraf
The site is http://www.speedbirdmodels.co.uk/planes

I have played around with the stylesheet without any success, if the browser is in windowed mode it will look fine, only in full screen mode will the page look odd displaying gaps.

Many thanks.

Re: Blank spaces in product pages

Posted: Thu Sep 29, 2016 5:23 pm
by daniGo
I think the problem is in javascript

Code: Select all

} else if (cols1 == 1) {
		$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix visible-lg"></div>');
	} else {
		$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
	}
Try change in

Code: Select all

} else if (cols1 == 1) {
		$('#content .product-layout:nth-child(3n+3)').after('<div class="clearfix visible-lg"></div>');
	} else {
		$('#content .product-layout:nth-child(3n+3)').after('<div class="clearfix"></div>');
	}

Re: Blank spaces in product pages

Posted: Fri Sep 30, 2016 4:26 pm
by NrealTraf
daniGo wrote:I think the problem is in javascript

Code: Select all

} else if (cols1 == 1) {
		$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix visible-lg"></div>');
	} else {
		$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
	}
Try change in

Code: Select all

} else if (cols1 == 1) {
		$('#content .product-layout:nth-child(3n+3)').after('<div class="clearfix visible-lg"></div>');
	} else {
		$('#content .product-layout:nth-child(3n+3)').after('<div class="clearfix"></div>');
	}

Thanks for the tip, what file do I need to edit?

It maybe worth saying that changing the theme does not correct how the items are displayed, suggesting it is not an issue with the theme.

Many Thanks

Re: Blank spaces in product pages

Posted: Fri Sep 30, 2016 7:16 pm
by daniGo
In file http://www.speedbirdmodels.co.uk/catalo ... /common.js

At the begining is:

Code: Select all

// Adding the clear Fix
cols1 = $('#column-right, #column-left').length;
	
if (cols1 == 2) {
	$('#content .product-layout:nth-child(2n+2)').after('<div class="clearfix visible-md visible-sm"></div>');
} else if (cols1 == 1) {
	$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix visible-lg"></div>');
} else {
	$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
}
And next:

Code: Select all

if (cols == 2) {
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
} else if (cols == 1) {
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
} else {
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
}
The row structure is:

Code: Select all

    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg

Re: Blank spaces in product pages

Posted: Mon Oct 03, 2016 7:03 pm
by NrealTraf
daniGo wrote:In file http://www.speedbirdmodels.co.uk/catalo ... /common.js

At the begining is:

Code: Select all

// Adding the clear Fix
cols1 = $('#column-right, #column-left').length;
	
if (cols1 == 2) {
	$('#content .product-layout:nth-child(2n+2)').after('<div class="clearfix visible-md visible-sm"></div>');
} else if (cols1 == 1) {
	$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix visible-lg"></div>');
} else {
	$('#content .product-layout:nth-child(4n+4)').after('<div class="clearfix"></div>');
}
And next:

Code: Select all

if (cols == 2) {
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
} else if (cols == 1) {
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
} else {
	$('#content .product-layout').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
}
The row structure is:

Code: Select all

    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.product-layout.product-grid.col-lg-4.col-md-4.col-sm-6.col-xs-6
    div.clearfix.visible-lg
Thanks for your help, it worked.

Re: Blank spaces in product pages

Posted: Sun Nov 26, 2023 12:15 pm
by lockbox
I found the problem with the short order of the item or category, I may have 10 items, the one I wanted last I used short order 30 or 40 just to make it down the bottom, even If I add things,,

But I found this was leaving big white gaps in the last grid

So by fixing the short order of each item or sub-category, it seemed to fix it for me .. OC 3.0.2.0

Hope it helps someone
All times are UTC+08:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/