Products Carousel with mobile view responsive

[michklee]

Hi, I saw some others had trouble with this but couldn’t find a solution. I’m having trouble with the products carousel in tablet and mobile view. When the screen hits 768 width, the carousel only shows one small image but then sometimes shows 2 and then sometimes shows 3.

It seems like there’s enough space for there to be 4 all the way across still. How can I adjust it so there are 4 products all the way across here right from the get-go?

Here’s the page: http://www.whosthebabe.com/home-page/

[Kyle – SUPPORT]

Hi

You seem to have a lot of custom css in your child theme, please try and switch to the parent theme and let me know if the problem persists.

– Kyle

[jake4life]

Hi,

@michklee – I’ve got the same problem. Products carousel (latest products, related products) doesn’t work as it should in mobile resolutions. All resolutions lower than 768px neither display products in correct order nor slides products correctly.

@ Kyle – You should have first check out Nieghborhood demo page – cause its broken too (check out screenshot). Please check your demo page in 700 px resolution (hompage or product page).

You have to fix this issue. This is critical! It does not allow smooth expierience on any mobile divice (smartphone, tablet)!

I have an old backup of my store, with Neigborhood v1.52 – and it was ok back then.
I’ve disabled child theme and all custom css – nothing works.
I’ve tried to upload old “style.css” to Neighborhood theme folder – not working.
I’ve tried to upload old “responsive.css” to Neighborhood theme folder – not working.

Wordpress 3.9.1
WooCommerce 2.1.9
Neigborhood 1.7.1

[oytamuah]

I have this problem too.

[Kyle – SUPPORT]

Hi

The demo is running version 1.66, on my install which is running version 1,71 I do not get this issue, please can I see your link so that I can check?

– Kyle

[jake4life]

@ all-despaired-users
Apparently the carousel has problems with 2nd item display.
Check out this piece of code (it worked for me):

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {clear:none!important;}
.woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) {float: left !important;}

I have disabled further theme updates and will fight with all bugs on my own.

@ kyle
Please chceck out the code above and test it. Maybe you could resolve this problem in more adequate way. Thanks.

[Mohammad – SUPPORT]

Hi,

@jake4life – Thanks for this fix code :-).

With Best Regards
Swift Ideas