Problem with Product carosel

[huntingensemble]

Hi Guys,

I’m experiencing some trouble while using the carosel slider on the homepage.
It looks like it doesn’t show the bottom 30px of the image for some kind of reason…

See this image here: http://monosnap.com/image/ItsbLYEhfHubKaS5FUmdxW3waroJDS#

When you view the product in the normal shop page. The image is shown as normal (and with that I mean + the last 30px of the image).

One other issue I encountered; I notice that I really improved the loading time of the site, but when a visitor clicks on a catagory; the images load quite quick but the last approx. 30px of the image will always take longer to load (but the whole image is already loaded…) Any idea how to fix this and to upgrade UX?

Thanks again.
Joost

[laranz – SUPPORT]

Hi,

If you change the catalog image size, then try to recreate the thumbnails https://wordpress.org/plugins/regenerate-thumbnails/ if that still exists make sure you are on the latest theme version.

Let us know,

Thanks,
laranz.

[huntingensemble]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

Try adding this Custom CSS.

.woocommerce ul.products li.product figure { padding-bottom: 404px; }

Let us know,

Thanks,
laranz.

[huntingensemble]

Hi Larans,

Your Custom Css worked like a charm. Thanks for the suggestion!
Any idea why this was causing problems?

It also seems to load the last few 30px from the images much quicker so perfect.

This topic is resolved!

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad

[huntingensemble]

Hi, Mohammad/Laranz,

Sorry to bother you again but when I check on mobile (iOS/Safari) I see the homepage products are doing wierd. Do I also need to change Custom CSS for Mobile?

Other product images are working fine, it’s just the carosel

See link for screen: http://take.ms/BOqtW

Let me know,
Joost

[Rui Guerreiro – SUPPORT]

Hi,

Do you have any other custom css that can be causing this?
Can you provide us admin access to check?

-Rui

[huntingensemble]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

Add this Custom CSS.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.woocommerce ul.products li.product figure { padding-bottom: 289px; }
}

Let us know,

Thanks,
laranz.

[huntingensemble]

Hi Laranz,

Thanks for the quick follow up
This gives the following output on mobile: http://take.ms/WWxpd

Let me know.

Best,
Joost

[Swift Ideas – Ed]

Hi @huntingensemble

Looks like you are using an outdated version of the theme? We’ve since changed the way the product images are setup – to prevent incorrect heights.

Are you able to update?

– Ed

[huntingensemble]

Hi Guys,

Thanks for taking the time to take a look! Really appreciate it.

I’m indeed using an older version of the theme. I did a few of customizations (in Custom CSS) and core PHP to change the way it looks. But now I’m “scared” to update because I’m not sure if I can replicate those changes in the newer version.

I’m thinking of buying extra hosting for a development surrounding where I can copy our current database and files to so I can replicate the exact same site and update with the new theme and make it perfect so I can then upload it to our live hosting.

If I make customizations in the code PHP files I do need to re-upload the main theme folder (I can’t just use the child folder) right?

Thanks again,
Joost

[Mohammad – SUPPORT]

Hi,
You should make changes through child theme because you can update main theme without any problem and your changes will not lost after update. Now you have to take backup of changed files, upgrade theme automatically and re-upload your changed backup files again through FTP software. One more thing also, please make css changes through Admin -> Theme Options -> General Options -> Custom CSS.

Thanks
Mohammad