Product Description Size

[in2shooting]

Hi,

 

I have managed to increase the product description to 60 characters increasing the lines to 2.  I did this in themes/my_theme/templates/catalog/_partials/miniatures/product.tpl

 

Does anyone know how to increase the size of the box the description sits in to handle the increased text?

 

From:

 

To:

[NemoPS]

Can you share your site's url? You can inspect the template by right-clicking on the element, and see what css sets a fixed height

[in2shooting]

Thank you. I have managed to work this out by tweak 3 items within the theme.css after increasing the characters to 60 in themes/my_theme/templates/catalog/_partials/miniatures/product.tpl

 

The 3 items where

I increased the height of the product-description class to 90px from 70px

#products .product-description, .featured-products .product-description, .product-accessories .product-description, .product-miniature .product-description {
    position: absolute;
    z-index: 1;
    background: #fff;
    width: 257px;
    bottom: 0;
    height: 90px;

 

This created an issue with the images and the quick view now not fitting

 

To fix the quick view I made the following change:

I changed the highlighted-informations class height to 4.125rem from 3.125rem

#products .highlighted-informations, .featured-products .highlighted-informations, .product-accessories .highlighted-informations, .product-miniature .highlighted-informations {
    position: absolute;
    bottom: 1.25rem;
    padding-top: .625rem;
    z-index: 0;
    background: #fff;
    text-align: center;
    width: 257px;
    height: 4.125rem;
    box-shadow: 0 -5px 10px -5px rgba(0,0,0,.2);
    transition: bottom .3s;
}

 

And an overall increase in the box size for the images:

I increased the thumbnail container class to 338px from 318px

#products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container, .product-miniature .thumbnail-container {
    position: relative;
    margin-bottom: 1.563rem;
    height: 338px;
    width: 257px;
    background: #fff;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
}

 

 

I now have it looking like this:

 

A small tweak could be made to the padding to draw the text in a few px from the edges of the container, but im happy as is. I hope this helps anyone wishing to increase the production description size.

[Gray_077]

Thanks so much for posting the solution it's been a great help!!