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

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

  • This topic has 9 replies, 3 voices, and was last updated 1 month ago by Tom.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1353586
    nik9

    Hello

    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.)
    http://mobiletest.me/ipad_mini_emulator/?u=https://brewmee.ch/shop/getraenke/bier/ambassador/

    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?

    CHeers

    #1353651
    David
    Staff
    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.

    #1353743
    nik9

    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.

    #1354481
    Tom
    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 🙂

    #1355419
    nik9

    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;
    } );
    #1355793
    Tom
    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.

    #1355800
    nik9

    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

    #1356758
    Tom
    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));
        }
    }
    #1357093
    nik9

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

    #1358125
    Tom
    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.