- This topic has 9 replies, 3 voices, and was last updated 3 years, 9 months ago by Tom.
-
AuthorPosts
-
July 6, 2020 at 3:09 am #1353586nik9
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 workingDo I miss a setting or something?
CHeers
July 6, 2020 at 4:14 am #1353651DavidStaffCustomer SupportHi 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 WrapNote: 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.
July 6, 2020 at 5:31 am #1353743nik9Hello 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.
July 6, 2020 at 3:10 pm #1354481TomLead DeveloperLead DeveloperHi 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 π
July 7, 2020 at 7:55 am #1355419nik9Hi 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) => WorksTablet View (Test on iPad with width: 768px)
– Product Columns (3) => does not work
– Related/Upsell Columns (3) => does not workMobile View
– Product Columns (2) => Works
– Related/Upsell Columns (2) => WorksI 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; } );
July 7, 2020 at 2:43 pm #1355793TomLead DeveloperLead DeveloperDid you find another solution? I just took another look and I’m seeing two columns all the way down to mobile.
July 7, 2020 at 2:51 pm #1355800nik9Hi 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
July 8, 2020 at 9:13 am #1356758TomLead DeveloperLead DeveloperStrange, 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)); } }
July 8, 2020 at 2:46 pm #1357093nik9Hi Tom,
Yes the settings are set in the Customizer.
Desktopview: Product Columns => 5
Tabletview: Product Columns => 3
Mobileview: Product Columns => 2Desktopview: Related/Upsell Columns => 4
Tabletview: Related/Upsell Columns => 3
Mobileview: Related/Upsell Columns => 2But 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….
July 9, 2020 at 8:35 am #1358125TomLead DeveloperLead DeveloperAre 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.
-
AuthorPosts
- You must be logged in to reply to this topic.