Woo columns on tablet

Hi there,

for the standard size 9.7" tablet i am seeing 3 columns on landscape.

Yh I reset the options and it started showing 3 on landscape, but now it's the opposite. Set to 3, portrait is 2 and landscape 3.

On my current site woocommerce responsiveness is as follows

Mobile - Set to 2, Portrait 2, Landscape changes to 3
Tablet - Set to 3, Portrait 3, Landscape changes to 4

This theme it's doing as follows

Mobile - Set to 2, Portrait 2, Landscape 2
Tablet - Set to 3, Portrait 2, Landscape changes to 3

Yeah the columns are based on 'media widths' as opposed to specific devices ( which is always hit and miss ).

Mobile is viewports upto 768px.
Tablet is viewports from 769px to 1024px.

Hence the changes between 2 and 3 depending on portrait and landscape.

Do you want Tablet Portrait to be 3 ? If so add this CSS:

@media (max-width: 1024px) and (min-width: 600px) {
    .woocommerce .wc-columns-container.wc-tablet-columns-3 .products {
        -ms-grid-columns: (1fr)[3] !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

It's a strange one, images are same as current site, it shows 3 columns in the cusomiser preview.

I don't get why it's showing 2 when it's set to 3. I even changed mobile to 3 columns which makes them really small and it showed 3 fine in portrait and landscape. Maybe it's a bug? As when I first opened this thread it was showing 3 in portrait but 2 in landscape, I reset the colums to original settings and moved it back to 3 and now its the other way round.

And it really should show an extra one in landscape instead of just enlagring them.

The Customizer Tablet view is set to c. 900px - for the larger size tablets.

Yes but I had it at 3 columns and was fine on my tablets (ipad & fire). Opened this thread as it was only showing 2 in landscape though, reset the columns now its the other way round, not something I need css for when I know it showed fine in portrait before. Desktop and Mobile can be changed to whatever and they show as set but tablet wont.

Hi there,

Right now here's what I'm seeing:

Desktop (anything above 1024px) = 4 columns
769px - 1024px = 3 columns
Anything under 769px = 2 columns

This is how the option is currently coded to work.

David's CSS will make it display 3 columns all the way down to 600px, and anything under that will go back to 2 columns.

When you say "it's the other way around", what do you mean exactly?

Hi Tom,

Thanks I understand, and I know that css will work. But when I opened this post it was because tablet was set to 3 columns, showed 3 in portrait but only 2 in landscape tablet.

I reset the options to default and then back to 3 columns. But it was now showing 2 in portrait and 3 landscape (other way round) just seems strange I need to use css when I know it showed 3 columns in portrait perfectly fine before.

Surely it should just follow the setting, Mobile settings follow perfectly fine, just tablet seems to be playing up.

Unless something else was interfering a landscape tablet would use the columns set for tablet or on the larger ipads it would use destkop as they are over 1024px.

Thanks, I will use the css for now and so some testing on a fresh install.

No problems :)