Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Virtuemart Fancy Product Slider (SKU# FLEX-00004)

TOPIC: How to center images horizontally in slider

How to center images horizontally in slider 5 years 8 months ago #8486

I have product images with sizes that Vary.

How can I center them so they appear in the middle of the module?

or is there a setting that will stretch the image to fit the size?

diamonddirectbuy.com/
The administrator has disabled public write access.

How to center images horizontally in slider 5 years 8 months ago #8525

Hi,

Stretching the product picture is not an ideal way. Because there will be picture deformation. Positioning the picture and have them stay in the middle is more professional way. But i will provide you the both ways.

Open this CSS file (or any CSS file that gets loaded to your website),
/modules/mod_vm_flexible_fancy_slider/media/css/themeBorder.css

and add these CSS rules depends on which method you want to go with:

1- to position the pictures into the middle:
.FlexibleProductImage a img { position:absolute; margin:auto; top:0px; left:0px; bottom:0px; right:0px;}

The result will be:

Attachment ScreenShot2014-02-14at7.59.10PM.png not found




2- to scretch the picture (vertically) to let them have the same height.
.FlexibleProductImage a img { height:200px; width:auto;}


The result will be:

Attachment ScreenShot2014-02-14at8.03.02PM.png not found




If i were you, i would prefer the 1st method, so the picture won't get deformed. But it is up to you.

________________________________________________________________________________

If you like Fancy Slider and satisfied with the support you have received, please "write a review" on:
flexiblewebdesign.com/Virtuemart-Modules/Virtuemart-Flexible-Fancy-Product-Slider

Rate Fancy Slider and write a couple of sentences to share your experience with the support team. It won't take more than 2 minutes from you but it is extremely important for us. Thanks in advance!


Regards,
Support
The administrator has disabled public write access.

How to center images horizontally in slider 4 years 9 months ago #11666

Goodday,

is there something like the above for the VM 3 compatible Fancy Product slider?
(using the Stick-v2 layout)

In the vm shop they use different size's of images.

As you see below, the text is higher than the other product. Is there a solution for that?


Attachment 2015-01-0612_08_10-Home.png not found




Attachment 2015-01-0614_21_22-Home.png not found


I hope you can help.
regards,

Arnold
Last Edit: 4 years 9 months ago by Arnold Loos.
The administrator has disabled public write access.

How to center images horizontally in slider 4 years 9 months ago #11693

Hi,

To any CSS file (that is being load to your website),
- OR to this CSS file: /modules/mod_vm_flexible_fancy_slider/media/css/themeStickV2.css

include this rule (to the bottom):
div.FlexibleImage2 { height:200px;}

Then; "picture" elements (for all products) will have same 200px height and the product names will be horizontally aligned. You can play around with the 200px and find the most appropriate height value that works for you.

If you like Fancy Slider and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Virtuemart-Modules/Virtuemart-Flexible-Fancy-Product-Slider

Rate Fancy Slider and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.

Thanks in advance!

Regards,
Support
Last Edit: 4 years 9 months ago by Support.
The administrator has disabled public write access.
Time to create page: 0.080 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