Two products per line

[Noyes]

Hi guys,

 

I am trying to configure my PrestaShop to show two products per line when entering a category. I use a free template called PrestaShop Template 1.4.5.

 

I have setup a free installation of PrestaShop here: http://presta.zd.se/

 

Do you know how to let this template show two product items per line? Please let me know.

 

Thank you,

Noyes

Edited July 31, 2012 by Noyes (see edit history)

[webplus]

You need to edit product_list.css but it's not one easy change but several changes in order to position all elements again correctly (image, description, etc), so you will need at least basic knowledge of CSS. For a start you have to "change #product_list li" rule to something like:

 

#product_list li {
border: 1px solid #EEEEEE;
border-radius: 3px 3px 3px 3px;
float: left;
margin-bottom: 14px;
padding: 12px 8px;
width: 249px;
}

 

and delete width: 342px; in another rule "#product_list li .center_block"

 

This will actually mess the other elements - break the layout, so the rest of elements needs to be positioned again according to your expectations. You can use Google Chrome "Inspect element" function to hover each element and find out which CSS file to edit and which CSS rule.

 

Hope this helps to point you to the right direction !

[Noyes]

Thanks webplus! Been working with css a bit now and I think I'm getting a feeling of this problem now.

 

The only problem that remains now is that the sort by/compare box which normally is located below the product list is messing with my product boxes. As you can see here: http://presta.zd.se/en/2-music-ipods/

 

The red border you see around the product list is actually the sort by/compare box. Do you know how to make this appear below the product list and not line up next to the products?

 

(I will share all the changes once we get this working and finished a nice structure of the products listing.)

 

Thank you,

Noyes

Edited August 1, 2012 by Noyes (see edit history)

[webplus]

You can move the sort by / compare box below products list by adding

 

clear: both;

 

to

 

.sortPagiBar #productsSortForm

 

in global.css

 

Not sure if I understood the other request, but you can mover with the blocks (sort by box) in category.tpl

Edited August 2, 2012 by webplus (see edit history)