[Resolved] Prime child theme mobile grid

[Terence]

I am using the Prime child theme and out of the box it places two products side by side when the home page is viewed from an iPhone, and this is not so when products are viewed on every other page or endpoint, so I really want then all to be one above the other.

How do I change that without affecting all the other locations and mobile grids for iPads etc.?

Terence.

[Leo]

Hi there,

Can you disable any caching plugins you might be using?

Let me know 🙂

[Terence]

OK that’s both FastCGI and Redis disabled

[Leo]

Technically this should be answered by their support as their shortcodes and style are determining the mobile grid style but give this a shot:

@media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
        float: none;
    }
}

[Terence]

That seems to work perfectly Leo, although I have now caught site of something else going on, on that page. There appears to be a spinner at the top of the page which never stops, but as far as I know there is no reason for there to be one there,

[Leo]

That’s from Soliloquy slider. Looks like you have a js error which is causing the issue:
https://www.screencast.com/t/XNl1TJdv

[Terence]

Wow you’re on the ball today Leo. Thanks I’ll check it out.

[Leo]

No problem 🙂

[Terence]

The problem turned out to be the Pinterest plugin which was trying to place a Pinterest pin overlay over the slider images, no matter that I had specifically excluded them. The Pinterest plugin is gone now and so is the conflict with Soliloquy. Thanks for your support Leo.

[Leo]

No problem 🙂

[Author]

Posts