Related Products - How to have More On Same Row ?

Hi All
I'm using 1551 on default black.
My related products grid shows 4 across but I want to change it to 5 or 6 - no matter what the image size it still only ever shows 4 products per line in the grid.
I can't find any way to set this in the back end so I would appreciate a little help please

Thanks !

Edit the section of your css stylesheet to change the div width. I think related products uses the box-product css though not using 1.5.5 so not sure if this is true. View source on your page and see what style is called then edit that section in the stylesheet.

Hi
The problem isn't the width - I can make the pics smaller so that 6 could easily fit in the space allotted, but when I do it still only shows 4 per row, so increasing the width of the div won't help unfortunately. It seems to me that the grid is being told to only display 4 in a row no matter what the width is. Thanks for trying though

I'm not talking about the width of the pictures. The overall division has a width and that is what affects how many fit on a row.

Yeha I understood what you meant - what I'm saying is that by changing the size of the pics (and therefor the individual products as displayed in related products) I can make it so there is lots of room for more on the same row, but doing so makes no difference to the amount actually shown, ie 4.
In the other grid displays (specials / latest etc) the number of products per row is regulated by their size and changing that size changes how many will fit and therefor how many are displayed per row, but in related products it's not working like that - there's some code somewhere that's limiting it to 4 per row no matter how much space there is.

Hope that's more clear

What is your url?

Actually I've sussed out what's causing it - no matter how small I make the images there is still the buy button, which is of course fixed width. Now ... the front page grids have more space because there are no margins, but on the related products page there are margins, so the grid has less space horizontally (if you see what I mean). So ... the related products grid only has space for 4 products per row because of the buy button.

Ok .. so what I really need to do is to decrease the space between each related product in the row a bit - just enough to fit the extra one on and make it look ok instead of 4 products left justified and a hunk of wasted space at the right side of the row. Css ?
Cheers !

Oh yeha - this must not affect any other grids (they're fine) - only the related products.


Edit:
Found it around line 200 on the default black style sheet ...
column-right .box-product > div,
#column-left .box-product > div { width: 158px; margin-right: none; }
#content .box-product > div { width: 130px; margin-right: 10px; }

Playing around with that and the image sizes I've managed to come to an almost happy medium, however the related products grid is indeed controlled by the same bit of css as the other grids, so tweaking one screws up the others.

I suppose the best thing would be to make a new class and edit the relevant tpl file to look for it instead of the global one - anyone know where/what file to edit ? I can't find any file like related.tpl or related-products.tpl or anything that looks like it might be it.

hillfish wrote: #column-left .box-product > div { width: 158px; margin-right: none; }
#content .box-product > div { width: 130px; margin-right: 10px; }

Playing around with that and the image sizes I've managed to come to an almost happy medium, however the related products grid is indeed controlled by the same bit of css as the other grids, so tweaking one screws up the others.

Which is what I meant when I said you had to change the div width.

Copy the box-product section in your css and rename to say related-product, set it how you want. If you are using the default related products that shows in a tab on the product page, you need to edit product.tpl and change the class for that section to your newly renamed class.

Ah so that's where it's hiding - right I'll do that and that should solve my issue with a bit of luck.
Good stuff - thanks for all your help labeshops (I thought you meant the overall div doh !) - much appreciated

Cheers

Mmmmm lol ....
Ok so I copied the .box-product block and renamed it, creating a new class called .box-related - the following is the block of code I copied and edited ...
Then I edited product.tpl (I'm using default black so in my case it used the file from the normal default template). I changed the reference at <div class="box-product"> to <div class="box-related"> on line 299.
I uploaded the new files and the result was not as expected - the related products 'grid' now displays only one row vertically down the left side (so it's a column now rather than a row, if you see what I mean).

The only difference between the block of code I copied and the original is a size value and a 'center' command - just for ease here is the unedited code block (the 'latest' grid is using this block of css and it looks fine) ...
I've checked just to be sure and the grids on the front page (latest etc) are using .box-product, and the one on the related products tab is using .box-related. Obviously I've screwed something up but I'm not seeing it lol - been playing with it for hours now.
So if someone could put me out of my stupidity and point me in the right direction I would be most grateful

Cheers

Unfortunately, I'm not familiar with the code for 1.5.5 which uses html5 which I also do not know. Hopefully someone else can point you in the right direction.

No worries labeshops - you've done more than enough
I'll take another stab at it later - if I manage to fix it I'll post the solution here for others in the future.

Cheers

Never look at code when you are not awake lol

width: 128px; is the part you should have to change. Make it a few px bigger than the photo size you set and it should do it. You might need to adjust the img section width in the css to make the related images a different size than your other box product items. Be sure you keep them smaller than the photo size you set in the admin section so they don't get pixelated.