Number of Related Products on mobile

[gsam]

On a desktop, the product page is showing the 4 related products I have assigned to the product.
On the mobile version, it is showing only the 1st related product. I've been looking over the CSS classes but I don't see why only 1 related product would be listed instead of 4.

Does anyone have a tip on what's going on?

[Bruce - PhosphorMedia]

Usually, on mobile they should stack in one row columns but the specific markup would depend on which framework you are using.

[Matt Zimmermann]

Can you post a link to the product in question?

[gsam]

I can see the issue is related to the product carousel. The .x-carousel_button is set to display:none. If I remove the display:none property then the buttons show up but if I click the next button it opens the next related product page instead of advancing the carousel.

[gsam]

Wanted to see if my problem was related to my development store since it's been around for a long time and has had several Readythemes loaded on it.

After setting up a new clean v9.12 development store. I installed the Shadows framework and I've made minimal changes to it.

The issue remains and appears to be related to the x-carousel and the carousel buttons associated with the related products.

Example product link: http://dev3.paddletramps.com/product/500175-OAK.html

[Matt Zimmermann]

Hi Gary,

Currently, that is how the carousel for related product works in Shadows; i.e. there are no buttons but you can swipe. To show the buttons, in your theme-syles.css file, add the following code:

.x-carousel__button {
    display: inline-block;
    padding: 0;
    position: absolute;
    top: 50%;
    font-size: 3rem;
    background-color: rgba(255, 255, 255, 0);
    border: 0 none;
    opacity: 0.25;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: ease-in-out 0.3s;
    z-index: 50;
}

.x-carousel__button-right {
    right: 0;
}

.x-carousel__button:hover {
    background-color: rgba(255, 255, 255, 0.25);
    opacity: 1;
}