Woocommerce shop alignment options for tablet

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!

Hey Tom,

Thats great!

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

Best,

Peter

Oops sorry wrong thread.

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

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 :)

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

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);
    }
}

Hey Tom,

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

Best,

Peter

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

Hey Tom,

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

Its in my child theme style.css.

Best,

Peter

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.

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

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.

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