Tablet view port on niche theme product single pages broken

Hi there,

the Niche site has a custom gallery - where all single product images are stacked.
If you're not using that feature then you can delete the following in Appearance > Elements:

Gallery Stack
Close Summary Wrap

Note: You can Quick edit and change their status to draft instead of deleting them if you want.

Then remove this CSS from the Customizer > Additional CSS

/* Stacked Gallery for desktop and sticky summary */

@media (min-width: 768px) {
    .woocommerce-product-gallery {
        display: none;
    }

    .woo-sumamry-wrap {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        margin-bottom: 80px;
    }

    .woo-gallery-stack {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .woo-gallery-stack img {
        margin-bottom: 20px;
    }

    .woocommerce-tabs {
        grid-column: 1;
    }

    .woocommerce div.product div.summary {
        grid-column: 2;
        grid-row: 1;
        margin-left: 80px;
        position: -webkit-sticky;
        position: sticky;
        top: 105px;
        bottom: 100px;
        padding-right: 80px;
    }

    .single-product span.onsale {
        position: absolute;
        top: 0;
    }
}

The single product will now respect all customizer settings.

Hello David

Thanks. So now I changed the two Elements to draft and comment the CSS code as you mentoined.

Now it look quit better, but the product page still ignores the "Related/Upsell Columns" settings. On tablet view I get 1 product per line. But the setting is set to 2. Are there other options to set?

Cheers.

Hi there,

The mobile layout kicks in at 768px, which is what you're seeing there.

Some of our mobile stuff can be filtered to change the width, including the WooCommerce stylesheet.

Try this:

add_filter( 'generate_media_queries', function( $queries ) {
     $queries['mobile'] = '(max-width:767px)';

     return $queries;
} );

Let me know if that helps or not :)

Hi Tom

Unfortunately no. It does not work as expected.

I try to do the following:

Desktop View
- Product Columns (5) => Works
- Related/Upsell Columns (4) => Works

Tablet View (Test on iPad with width: 768px)
- Product Columns (3) => does not work
- Related/Upsell Columns (3) => does not work

Mobile View
- Product Columns (2) => Works
- Related/Upsell Columns (2) => Works

I only had problems with the tablet view. :(
If I use, then I get the same view on tablet as on desktop.

add_filter( 'generate_media_queries', function( $queries ) {
     $queries['mobile'] = '(max-width:767px)';

     return $queries;
} );

Did you find another solution? I just took another look and I'm seeing two columns all the way down to mobile.

Hi Tom,

Nope :(

When you say mobile, you mean smartphone? because there it look right. But the problem here is with tablets.

Take a look here - still 5 in a row instead of 3: http://www.responsinator.com/?url=http://brewmee.ch/shop/&device=ipad&orientation=portrait

And here - still 4 related products in a row instead of 3: http://www.responsinator.com/?url=https://brewmee.ch/shop/getraenke/bier/ambassador/&device=ipad&orientation=portrait

Strange, and the tablet column options are set in the Customizer?

You can also use some CSS as well:

@media (max-width: 1000px) and (min-width: 768px) {
    .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 {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .wc-columns-container.wc-columns-5 .products, 
    .wc-related-upsell-columns-5 .related ul.products, 
    .wc-related-upsell-columns-5 .up-sells ul.products {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

Hi Tom,

Yes the settings are set in the Customizer.

Desktopview: Product Columns => 5
Tabletview: Product Columns => 3
Mobileview: Product Columns => 2

Desktopview: Related/Upsell Columns => 4
Tabletview: Related/Upsell Columns => 3
Mobileview: Related/Upsell Columns => 2

But with your CSS hack it works! I'm not sure if this is a good way to overwrite Customizer settings. When I forget this I will spend hours to find out that I used a CSS code for this. Haha

Why does it not work via customizer? I mean, the WP bult-in tabletview shows the correct amount of item. But on a real "tablet" is does not work. It looks like there is a view port issue on my page....

Are we sure it's not just the tool you're using to mimic those devices? Things seem fine when using developer tools at those widgets without my CSS above.