[Resolved] Woo columns on tablet

[Ash]

Hi,

For categories I have 3 columns set for tablet, shows fine. But in tablet landscape it only shows 2.

Any ideas?

[David]

Hi there,

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

[Ash]

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

[David]

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

[Ash]

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.

[David]

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

[Ash]

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.

[Tom]

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?

[Ash]

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.

[David]

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.

[Ash]

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

[David]

No problems 🙂

[Author]

Posts