- This topic has 19 replies, 5 voices, and was last updated 2 years, 12 months ago by Elvin.
-
AuthorPosts
-
October 15, 2020 at 7:58 am #1490579Jared
Hi, I’m having trouble with the shop pages in Woocommerce. Because of how the product gallery slider loads on mobile. Screenshot sent in private. You can see the title first appears on the right hand side, then is pushed down as the product images load.
Additional info: Using WP Rocket to minify css and js. In GP Premium I have the dynamic css set as external file, structure: flexbox and cache dynamic css.
Any help is greatly appreciated, thanks.
*Added URL
October 15, 2020 at 8:07 am #1490607LeoStaffCustomer SupportHi there,
Any chance you can activate a Twenty series WP theme to confirm that the issue doesn’t happen there?
October 15, 2020 at 8:25 am #1490644JaredHi Leo,
I tried twenty twenty, twenty sixteen and twenty nineteen on my localhost copy. None of them showed same issue. I’ve added a video link in private.
Thanks for the help.
October 15, 2020 at 8:28 am #1490658LeoStaffCustomer SupportThanks for testing.
Next, can you disable all plugins except GP Premium and WooCommerce to test?
Thanks 🙂
October 15, 2020 at 8:41 am #1490687JaredOkay, I’ve reactivated GeneratePress and only plugins active are Woocommerce and GP Premium. I’m still having the issue with the content area loading onto the right hand side. Video attached in private.
Thanks again.
October 15, 2020 at 11:38 am #1490903LeoStaffCustomer SupportHmm that looks like some sort of flash of content issue which the theme doesn’t have.
Do you see the same issue here?
https://gpsites.co/seller/product/happy-ninja/October 15, 2020 at 10:09 pm #1491378JaredHi Leo,
I don’t see the issue on that demo site.
Wonder what’s different.
October 16, 2020 at 12:56 am #1491514JaredActually, on second look I do see the issue present on that demo site. Steps to reproduce: Put it into mobile view and refresh the page, you’ll see the content area load onto the right hand side then get pushed down by the product images.
October 16, 2020 at 7:16 am #1491941DavidStaffCustomer SupportHi there,
can you disable your cache plugins so we can take a closer look?
October 16, 2020 at 7:55 am #1492111JaredHi David, I’ve disabled the cache on my domain. Trying to figure out what’s causing the content to load on the right side first before jumping below the image area. It’s causing CLS issues in PageSpeed Insights.
Appreciate the help!
October 16, 2020 at 8:22 am #1492140JaredOn the demo site https://gpsites.co/seller/product/happy-ninja/ it looks like it’s having the same issue for mobile views. Throttling the network down reveals the behavior. I’ve attached a video of it in action.
October 17, 2020 at 2:12 am #1492880JaredHere’s another site of mine (shared in private) with no caching we can see the same issue.
October 17, 2020 at 3:58 am #1492954DavidStaffCustomer SupportWe have found an issue with the Inline CSS vs the smallscreen/mobile CSS.
We’ll be updated GPP premium to resolve that.In the meantime can you try adding this CSS to your site:
@media(max-width: 768px) { .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 100%; } }
October 17, 2020 at 4:34 am #1492985JaredThank you David, your CSS fixed the sunwear site. For the other site we are still having a CLS issue. The CSS did stop it from loading next to the product image slider but it seems the div class “summary entry-summary” still wants to load at 40% width initially before stretching out to full width. I’ve disabled WP Rocket so hopefully you can see what’s going on (link attached)
October 17, 2020 at 4:52 am #1493002DavidStaffCustomer SupportTry this CSS instead:
@media(max-width: 768px) { .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary { float: none; width: 100%; } }
-
AuthorPosts
- You must be logged in to reply to this topic.