Blank spaces in product pages

Quote

Post by NrealTraf » Fri Sep 09, 2016 4:21 pm

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.
NrealTraf
Newbie
Posts
15
Joined
Wed Sep 07, 2016 11:03 pm
Top

Re: Blank spaces in product pages

Quote

Post by cyclops12 » Sat Sep 10, 2016 12:29 am

Not sure what version you have but This may help you out
cyclops12
Expert Member
Posts
2372
Joined
Sun Sep 27, 2015 1:10 am
Top

Re: Blank spaces in product pages

Quote

Post by NrealTraf » Wed Sep 28, 2016 5:24 pm

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
NrealTraf
Newbie
Posts
15
Joined
Wed Sep 07, 2016 11:03 pm
Top

Re: Blank spaces in product pages

Quote

Post by IP_CAM » Wed Sep 28, 2016 8:03 pm

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

My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.

User avatar
IP_CAM
Legendary Member
Posts
13060
Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Top

Re: Blank spaces in product pages

Quote

Post by opencartboost » Thu Sep 29, 2016 2:09 pm

Please provide your website link in order to look closer.
Without know your code that is very hard to solve your problem.
opencartboost
Active Member
Posts
211
Joined
Thu Jul 09, 2015 5:59 am
Top

Re: Blank spaces in product pages

Quote

Post by NrealTraf » Thu Sep 29, 2016 4:42 pm

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.
NrealTraf
Newbie
Posts
15
Joined
Wed Sep 07, 2016 11:03 pm
Top

Re: Blank spaces in product pages

Quote

Post by daniGo » Thu Sep 29, 2016 5:23 pm

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

http://www.gombac.si

daniGo
Active Member
Posts
162
Joined
Wed Mar 20, 2013 4:49 pm
Location - Slovenia
Top

Re: Blank spaces in product pages

Quote

Post by NrealTraf » Fri Sep 30, 2016 4:26 pm

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
NrealTraf
Newbie
Posts
15
Joined
Wed Sep 07, 2016 11:03 pm
Top

Re: Blank spaces in product pages

Quote

Post by daniGo » Fri Sep 30, 2016 7:16 pm

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

http://www.gombac.si

daniGo
Active Member
Posts
162
Joined
Wed Mar 20, 2013 4:49 pm
Location - Slovenia
Top

Re: Blank spaces in product pages

Quote

Post by NrealTraf » Mon Oct 03, 2016 7:03 pm

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.
NrealTraf
Newbie
Posts
15
Joined
Wed Sep 07, 2016 11:03 pm
Top

Re: Blank spaces in product pages

Quote

Post by lockbox » Sun Nov 26, 2023 12:15 pm

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

Attachments

Screen Shot 2023-11-26 at 3.10.29 pm.png

white gaps missing icons - Screen Shot 2023-11-26 at 3.10.29 pm.png (387.01 KiB) Viewed 1200 times

lockbox
Newbie
Posts
5
Joined
Sat May 28, 2016 11:15 am
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: Baidu [Spider], Semrush [Bot] and 59 guests