Related products with

How to limit related products with ? Lets say I have 4 related products in product view (in the bottom), but if product names are long, related products do not fit in one row and then it looks ugly.

What is the way to limit product name in the related product section ?

Sorry for typing mistake : width not with

Hi

Please show me the exact page You want to change this width.

http://prezervatyvai.lt/index.php?optio ... 10&Itemid=

How to limit related products with ? Lets say I have 4 related products in product view (in the bottom), but if product names are long, related products do not fit in one row and then it looks ugly.

What is the way to limit product name in the related product section ?

Hi

Try with this code:

Code: Select all

.product-related-products > div {
    width: 16%;
}


please try to find the best value for You. Remember that there is a lot of padding attached to this layer so for example 25% will not cut it in 4. You will see

I did it and it works, but here is another problem
I would like to remove "vm-img-desc" as under the product picture you can see not only the name of product, but also image description which sometimes is too long. I understand that it should be in some php file responsible for "related products". But where this file is ?

Hi

Try with this code:

Code: Select all

.product-related-products > div {
    width: 16%;
}


please try to find the best value for You. Remember that there is a lot of padding attached to this layer so for example 25% will not cut it in 4. You will see

Hi

I think it should be configurable in VM, but You can alwaus hide via css:

Code: Select all

.product-related-products .product-field-desc { display:none; }


Thanks, it worked again. Now the last question before it will be perfect

Look here : http://prezervatyvai.lt/vitalis/vitalis ... zervatyvai
Now I have 4 related products, but alignment is not nice, because one product has short description, another long and products are not in one line.

So the question would be : how can I truncate product name lets say to 15 symbols.

Hi

I think it should be configurable in VM, but You can alwaus hide via css:

Code: Select all

.product-related-products .product-field-desc { display:none; }


Or maybe it didn't worked. I put ".product-related-products .product-field-desc { display:none; }" to the custom css in template configuration.

[quote="Vaičikonis"]Thanks, it worked again. Now the last question before it will be perfect

Hi

Try with code:

Code: Select all

.product-related-products .product-field-display a {
height: 100px;
overflow:hidden;
}


and than play with height value till only the first line of text will be visible.

I put this code

Code: Select all

.product-related-products .product-field-desc { display:none; }

.product-related-products .product-field-display a {
height: 100px;
overflow:hidden;
}


in override.css now, but id does not give any effect.

Hi

Try with code:

Code: Select all

.product-related-products .product-field-display a {
height: 100px;
overflow:hidden;
}


and than play with height value till only the first line of text will be visible.

Hi

I do not see this code anywhere. Please try clear cache and check if css syntax is corect.

See my picture attached :

css.jpg

Hi

I do not see this code anywhere. Please try clear cache and check if css syntax is corect.

Hi

Browser must have loaded old file. I can see it now

Here is an fixed code:

Code: Select all

.product-related-products .product-field-display a {
    display: block;
    height: 103px;
    overflow: hidden;
}

.product-related-products .product-field-display a img {
    height: 90px;
    width: 90px;
}


Yes, this is it. Thanks!

By the way, I noticed that in recent months Gavick support is doing much better (faster). Thanks!

Hi

Browser must have loaded old file. I can see it now

Here is an fixed code:

Code: Select all

.product-related-products .product-field-display a {
    display: block;
    height: 103px;
    overflow: hidden;
}

.product-related-products .product-field-display a img {
    height: 90px;
    width: 90px;
}


Hi

Gret to hear that. It's all thanks to new system Dziudek build to informa us about new questions. Still some problems with bumped topics, but I'm tryin to inform as much as possible to not to bump, because system is recognizing it as unswered and moves it to the end of the line.