Jump to content

Product Description Size


Recommended Posts

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:

5b8c32b4c4680_ScreenShot2018-09-02at19_53_21.png.0b8fc970566bdbc16a9343fb9ee9cca7.png

 

To:5b8c32b558192_ScreenShot2018-09-02at19_52_39.png.81c2ca547118e288c298b8a4b3a16218.png

Link to comment
Share on other sites

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:

5b8da49dc398f_ScreenShot2018-09-03at22_15_40.png.ac0058709a9ec54516e4df68b81775dc.png

 

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.

Link to comment
Share on other sites

  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...