[Resolved] Tablet view port on niche theme product single pages broken

Home Forums Support Tablet view port on niche theme product single pages broken

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #1353586


    I just noticed that the view on iPad mini / pro and other tablets for products single pages are bad with niche theme.

    Here you can have a look at it. (It looks the same when I use the wordpress built-in tablet view option in the customizer or with Developer tools.)

    I already tried to remove all my custom CSS but nothing changes. It seems, that this is coming from niche CSS.

    So I noticed the following points:
    – Product Single page looks ugly
    – Related products setting from WooCommerce customizer (Currently set to “two” on tablets) not working

    Do I miss a setting or something?


    Customer Support

    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?


    Lead Developer
    Lead Developer

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

    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

    Lead Developer
    Lead Developer

    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….

    Lead Developer
    Lead Developer

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.