Related Products - Separate image from title

[lira]

Hi,

I was wondering if it is a way of separate image from title in related products.
I have images with different height, that way, depending on height, titles are in different vertical positions and not aligned...  I would like to add some css in order to align all image titles.

I'm using VM 2.0.20b and joomla 2.5.8


Thanks for your help 

[jenkinhill]

http://forum.virtuemart.net/index.php?topic=118683.0

[lira]

Hi jenkinhill,

Aprecciate your link... Would also apreciate some help regarding to my question..

Thanks

[jenkinhill]

I don't have the old 2.0.20 versions around any more to see the code. There have been multiple changes since then, not only with security.

Are you refering to the related products on the product page view, or as shown in the add to cart popup?

[lira]

Hi Jenk,

I'm referring to the related products on the product page view, the list located at bottom page.

Do you need a link?

Thanks

[jenkinhill]

You will have to adjust the css to suit your template version, but something like this should do the trick. This is based on the default templates in the current 2.5.4 VM version.

Code Select Expand


.product-field-type-R {
width:120px;    /* adjust height & width to suit largest possible thumb image size */
height:200px;
float:left;
position: relative;
}
span.product-field-display {
position: absolute; bottom: 0; right: 0
}

.customer-reviews h4 {
clear:both;
padding-top:40px;
}


You may not need to add padding to .customer reviews, but you will need a clear under the related products div.

[lira]

Hi Jenk,

Thanks a lot for your suggestion.

I wasn't able to use it because it affects the size of entire related products "box"... However your code helped me finding the code that I need to change in order to achieve what I want, and the trick was quite simple  , only need to add "min-height:100px" to this line:

Code Select Expand

.product-field-display a img{display: block; margin-left: auto; margin-right: auto; margin-top:10px; min-height:100px;}

Again, thanks for your suggestion and help!

Regards