[Support request] Woocommerce shop alignment options for tablet

[moderndev]

Hello,

I was wondering if you could add options to edit shop settings on tablet.

In particular it would be great to do a two column layout in woocommerce archive pages on Tablet.

Cheers,

Peter

[Tom]

We’ll be doing this in GPP 1.9 – it’s one of the highest priorities 🙂

For now, it’s possible with CSS if you need help.

Thanks!

[moderndev]

Hey Tom,

Thats great!

Two questions. When can I expect 1.9? and are you also working on an off canvas cart?

Best,

Peter

[moderndev]

Oops sorry wrong thread.

Not enough sleep. So forget the second question it not related. Unless you have an answer?

[Tom]

1.9 will likely be a September release we’re thinking.

An off-canvas cart isn’t in the plans at the moment, but an off-canvas filter system is 🙂

[moderndev]

Is there a way to resolve this via css in the mean time?

[Tom]

Hi there,

Give this a shot:

@media (max-width: 1000px) and (min-width: 769px) {
    .wc-related-upsell-columns-4 .related ul.products, 
    .wc-related-upsell-columns-4 .up-sells ul.products, 
    .woocommerce .wc-columns-container.wc-columns-4 .products {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2,1fr);
    }
}

[moderndev]

Hey Tom,

Unfortunately, that didn’t seem to have any effect and I noticed a strange bug with the hover image flipper.

Best,

Peter

[Tom]

Is the CSS still added to the site? If not, can you re-add it?

[moderndev]

Hey Tom,

Yes its been on the site all day. I have not removed it.

Its in my child theme style.css.

Best,

Peter

[Tom]

Hi there,

Try running your CSS through a validator: https://jigsaw.w3.org/css-validator/#validate_by_input

You seem to have some broken CSS on line 287-289.

If you fix that, it should work.

[moderndev]

Hey Tom,

Thanks for that. I fixed the error on 289. I had a couple of extra curly braces.

I tested after and it still was not working. So I ran the validator again and got an error with the code you gave me.

I have never used this so I cannot see the issue. Can you?

Best,

Peter

[David]

Hi there,

this CSS property is unrecongized:

-ms-grid-columns: (1fr)[2];

It is to provide support for the old IE10 browser – so you can remove that line if you’re not concerned about ie10 support.

[moderndev]

Thanks David,

I am not really that concerned about IE10, but the main point is that the css is not actually functioning.

I am not getting a two column layout.

Best,

Peter

[Author]

Posts