[solved] Space between products picture in product list

[Bino_Hugo]

Hi,

 

I'm trying to have more space between the product which are displayed in the list.

I have increased the picture size in Preferences --> Picture, but it occurred that the pictures are now overlapping on themselves.

For instance : http://equipe4.ppaec...urriculum-vitae

 

By the way, if you know how to reduce / delete the column displayed on the left, it would be nice !

 

Thank in Advance !!

 

I'm staying at your disposal if you need further informations,

 

Hugo

[vekia]

hello

 

you use non-default template so it's hard to say how your template files look like. But to remove left column you should check

header.tpl / footer.tpl located in yout theme directory

 

you probably have got there:

 

<div id="left_column" class="column" role="complementary"></div>

 

remove it. But also you have to change the width and float to the center column.

 

 

and question related to the product list:

you want to create more space between products vertically or horizontally?

[Mellow]

Hi,

 

you need to adjust the size of the elements which contain your products

If you have knowledges in css edit the file /themes/your-theme/css/product_list.css

Somewhere in this file you will find something like this :

.grid_view #product_list li { width: 230px; }

increase the width to fit the new size of your images

[vekia]

@Bino_Hugo

let us know if the @Mellow solution works for you

 

waiting for your reply

 

regards

[Mellow]

And to remove the left column you need to change the width of "#category #center_column" from 980px to 100%

But you will have to find where, because it doesn't seem to be set in global.css (it is a responsive theme and there may be some custom css files...)

 

Regards

[Bino_Hugo]

Hi guys,

 

I would like to thank you both for helping me. The Prestashop community is so helpful.

 

1. I managed to increase the space between the product. Thank you very much for that.

2. I'm still trying to find the solution to remove the left column.

I have tried to modify the width of the central column in the theme.css and product.list.css but it didn't changed anything...

 

I will let you know if I succeed !

 

+++

Edited May 20, 2013 by Bino_Hugo (see edit history)

[Bino_Hugo]

Hi guys,

 

The left column is removed.

The grid as changed, though.

 

 

You can notice the margin between the images 2 and 3 on each line isn't the same.

http://equipe4.ppaecommerce.fr/6-curriculum-vitae

 

Any Ideas to fixe this (last) collateral issues ?

 

Have a nice day,

 

Hugo

[vekia]

it's probably because in your foreach loop (in product-list.tpl) file you've got:

 

{if $smarty.foreach.products.index % 2}

remove this condition (with else if)

[Bino_Hugo]

I just removed the following condition in red but nothing happened.

It's actually the margin between the 1 and the 2nd product which is smaller.

http://equipe4.ppaecommerce.fr/7-lettre-de-motivation

I'am still trying.

 

+++

 

<ul id="product_list" class="clearfix">

{foreach from=$products item=product name=products}

<li class="ajax_block_product {if $smarty.foreach.products.first} first_item {elseif $smarty.foreach.products.last} last_item{/if} {if $smarty.foreach.products.index % 2} alternate_item{else}item{/if} {if $smarty.foreach.products.iteration%$nbItemsPerLine == 0}last_item_of_line mobile_no_margin{/if} {if $smarty.foreach.products.iteration%$nbItemsPerLinebig == 0}last_item_of_line_big{/if} clearfix">

<div class="left_block">

{if isset($comparator_max_item) && $comparator_max_item}

[vekia]

last_item_of_line_big

 

this css class causing this

[Bino_Hugo]

Actually I had to replace value in red by "3".

Everything is allright now.

 

Thx you for helping me guys,

 

 

{if isset($products)}

{assign var='nbItemsPerLine' value=3}

{assign var='nbItemsPerLinebig' value=4}

[vekia]

awesome :-)

 

i marked this thread as solved

 

regards