Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Template - MaterialMart (SKU# FLEX-00020)

TOPIC: The height of product thumbnails exceed the height

The height of product thumbnails exceed the height 3 years 2 months ago #15692

The height of product thumbnails exceed the height of the page:
The height of the vignettes of the products is too important.
Thumbnails occupy more than the height of a page.
Question: How to reduce the height of thumbnails produced?
Attachments:
The administrator has disabled public write access.

The height of product thumbnails exceed the height 3 years 1 month ago #15706

Hi, that is an interesting case. Because we limit the product pictures by max-width and let picture get auto-height.. Since your pictures are so tall, when it reaches to max-width: 100% (within the box) the height becomes extremely large.

You can easily fix this issue by adding a simple CSS rule to limit the max-height.

So, open this CSS file:
ROOT/templates/YOUR_TEMPLATE/html/com_virtuemart/assets/css/flexible.css

scroll to the very bottom and insert these CSS lines:
/* For category pictures */
.flexCard-image img,
.flexibleContainer img.responsive-img {  
    display: block;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    max-height: 300px;
}
 
/* For additional image thumbnails on product details page */
.additionalImagesslider img {
    max-height: 100px;
}
 
/* Cart page, thmbnails in the cart-list */
.cartLeft img {
    max-height: 150px;
}

then, you should be good to go.

NOTE: In each rule above, there is max-height property. You can increase/decrease the max-height values as you wish.
Last Edit: 3 years 1 month ago by Support.
The administrator has disabled public write access.
Time to create page: 0.160 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo