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

TOPIC: center images on category view.

center images on category view. 7 years 8 months ago #1017

Hi,

Is it possible to get a product image in the middle of category box? Right now they align to the top of the box.


center.JPG



Cheers,

Jan Willem
Last Edit: 7 years 8 months ago by Jan-Willem Verbeek.
The topic has been locked.

center images on category view. 7 years 8 months ago #1022

Hi,

Vertically centering is a big dilemma and requires display: table-cell; Rule but some browser doesn't support it (IE),
the position:absolute; way also doesn't work, since we don't know what the thumbnail's height value. (Everybody uses different values for thumbnails.

So all in all, there is nothing i can offer you now to make the pictures to be centered perfectly in all situation. But you can use the "padding-top:" Rule to give some space to the top of thumbnails. So they won't look as they stick to the top.

For this purpose, open the FlexibleVM2Global.css file, which is right here:
ROOT/templates/<yourjoomlatemplatfeolder>/html/com_virtuemart/assets/css/FlexibleVM2Global.css

And find this CSS rule:
.FlexibleThumbBrowseV1Picture img {
    max-height: 100%;
    max-width: 90%;
}

add "padding-top" rule to it and don't forget to reduce the max-height: value depends on how big padding value you are going to type, since the padding value will be disregarded while calculating the max-height of thumbnail, it should eventually look like this:
.FlexibleThumbBrowseV1Picture img {
    max-height: 90%;
    max-width: 90%;
    padding-top:20px;
}

Depends on your layout and your thumbnail's height, you can increase or decrease the 20px value.
The topic has been locked.

center images on category view. 7 years 8 months ago #1033

Thanks again! Think I'm going to resize my images.

Cheers,

Jan Willem
The topic has been locked.

center images on category view. 7 years 7 months ago #1039

your welcome.
If you need any further assistance, you can create a new topic.

Case solved. Topic is closed.
The topic has been locked.
Time to create page: 0.090 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