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.

Newbie

Posts

Joined
Wed Sep 07, 2016 11:03 pm

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

Not sure what version you have but This may help you out

Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

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

Newbie

Posts

Joined
Wed Sep 07, 2016 11:03 pm

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

Contact: jti@jacob.ch
---
Demos:
OpenCart LIGHT 1.5.6.5: http://www.openshop.li/light/
OpenCart V-PRO 1.5.6.5: http://www.velomech.ch/shop/
V-PRO Multi Theme View: http://www.openshop.li/shop/
---
Downloads:
Free Github OC Downloads: https://github.com/IP-CAM
1'900+ FREE OC Extensions from the world's largest Github OC Archive.
---
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

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.

Active Member

Posts

Joined
Thu Jul 09, 2015 5:59 am

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.

Newbie

Posts

Joined
Wed Sep 07, 2016 11:03 pm

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


Active Member

Posts

Joined
Wed Mar 20, 2013 4:49 pm
Location - Slovenia

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

Newbie

Posts

Joined
Wed Sep 07, 2016 11:03 pm

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


Active Member

Posts

Joined
Wed Mar 20, 2013 4:49 pm
Location - Slovenia

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.

Newbie

Posts

Joined
Wed Sep 07, 2016 11:03 pm
Who is online

Users browsing this forum: No registered users and 22 guests