Shop Products won't display 4 item inline on tablet

[Taffy]

Our issue is with Shop Product not displaying 4 items inline when viewing responsively on a tablet in portrait mode.

We need prompt help resolving this issue.

Thanks.

[Taffy]

Can this issue plea be addressed?

[Taffy]

Please review issue here: http://www.taffydev.com.au/clients/artifix/

To view the issue, you must view on tablet in portrait mode or resize browser window to tablet size – you’ll see that the 4th Shop Product item drops to a second line.

This bug exists on the Dante demo.

[Melanie – SUPPORT]

Hi, please try adding this custom css:

@media only screen and (max-width: 991px) {
body .has-no-sidebar ul.products li.product {
width: 165px;
} }

Let me know if that worked!

[andrelog]

Good! Thanks

[Taffy]

Wonderful! Love your prompt support. Dante is by far the best theme with the most impressive support team!

[Taffy]

Another question…
How can you keep the carousel arrows visible across all responsive devices?

[Melanie – SUPPORT]

Can you post up a concrete link to a page with a carousel? I’ll investigate 🙂

[Taffy]

http://www.taffydev.com.au/clients/artifix/

I have initialised a carousel for you, but now see that the images are misaligned – the four images are pushed too far to the right.

On a PC the right arrow is overlapping the image.
On a tablet (portrait mode) the fourth image is running of the screen.

[Swift Ideas – Ed]

Hi Mark,

Please remove that CSS from above, it will cause issues with your layout – apologies for that. I’ve checked it without the CSS and it seems to work fine. If you remove it I’ll happily take a look otherwise.

For the arrows, you can use this custom css:

@media only screen and (max-width: 1024px) {
.carousel-wrap a.prev, .carousel-wrap a.next, .flex-direction-nav {
display: block!important;
}
}

– Ed

[Swift Ideas – Ed]

CSS fix for the layout should be:

.carousel-wrap ul.products li.product {
	margin-left: 20px!important;
}

Hope that helps.

– Ed

[Swift Ideas – Ed]

CSS fix for the layout should be:

.carousel-wrap ul.products li.product {
	margin-left: 20px!important;
}

Hope that helps.

– Ed

[Taffy]

This does seem to work either.

Please review: http://www.taffydev.com.au/clients/artifix/

The carousel is misaligned on left and right.

[Swift Ideas – Ed]

Ahh ok, the responsive css for larger screens should have taken over, try this instead:

.carousel-wrap ul.products li.product {
margin-left: 20px !important;
}
@media only screen and (min-width: 1200px) {
.carousel-wrap ul.products li.product {
margin-left: 30px!important;
}
}

– Ed

[Taffy]

Hi Ed,

Thanks for all the help, but it still isn’t right.

You’ll see that the alignment of the carousel is out on both the left and right on all devices/screen sizes. This is especially noticeable when the arrows remain visible on the tablet.

http://www.taffydev.com.au/clients/artifix/

Thanks,

Mark