- This topic has 10 replies, 3 voices, and was last updated 12 months ago by
David.
-
AuthorPosts
-
April 26, 2020 at 3:08 am #1256111
Sebastian
Hi,
I found a strange behavior on single product pages. On safari is a gap before the product meta-data (description). See the screenshot where Chrome is on the left and Safari on the right.
I did a new installation on a different domain and face the same problem. The Test Page is on Chrome okay and Safari not. The new installation has no additional plugins activated.
I hope you can help me.
April 26, 2020 at 3:13 am #1256117Sebastian
Oh yes … I forgot to mention that this effect only happens if the product is out of stock.
April 26, 2020 at 3:37 am #1256142Sebastian
Another comment: when the GP Premium module is deactivated it looks okay.
April 26, 2020 at 10:14 am #1256689Tom
Lead DeveloperLead DeveloperHi there,
What version of Safari are you using? I’m not able to see the issue on my end.
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 26, 2020 at 10:20 am #1256697Sebastian
Hi Tom
Safari 13.1 on Catalina 10.15.4
First loading seems fine. Please try a reload. Then it starts becoming weird. I tested on 3 different Macs.
iPad OS 13.4.1 same behavior.
Thanks
April 26, 2020 at 3:55 pm #1256966Tom
Lead DeveloperLead DeveloperTough one to debug – it snaps back whenever something in dev tools is changed.
Was trying to replicate on one of our Woo sites with no luck: https://gpsites.co/seller/product/happy-ninja/
Is it happening there for you?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 26, 2020 at 5:15 pm #1257035Sebastian
Okay, now it gets really weird.
What I did:
1. I checked your page and your page looked fine for me.
2. I deactivated my child theme and switched to basic GP. Looked fine.
3. Back to child theme > broken.
4. Deactivated my functions.php modifications > broken
5. Fresh child theme style.css > broken
6. Checked and turned on every custom css line by line. Then I saw that I had some css left from the product page sidebar I once used. Removed it > broken
7. Turned in GP customizer “Layout – Woocommerce – Single Product” content/right sidebar on > not broken
8. Switched back in GP customizer “Layout – Woocommerce – Single Product” to content/no sidebar > worksSince the last step it works. I had “Layout – Woocommerce – Single Product” to content/no sidebar all the time, but somehow turning it off and on again fixed my issue.
Okay, so I went back to the test page and tried to replicate it.
Seems it has something to do with the customizer setting combined with the template’s css code (template Merch). Again, only Safari. I guess David is the template author.
/*-- Right Sidebar --*/ @media (min-width: 768px) { #right-sidebar { border-left: 1px solid rgba(0,0,0,0.1); } #right-sidebar .widget { margin-bottom: 0; } #right-sidebar aside:first-child { padding-top: 0; } #right-sidebar aside:not(:first-child) { border-top: 1px solid rgba(0,0,0,0.1); } } /* Single Product Sidebar position */ @media (min-width: 768px) { .single-product #right-sidebar { float: right; } .single-product div.product .woocommerce-tabs, .single-product div.product .related.products, .single-product div.product .upsells.products { width: 66%; display: inline-block; } } @media (max-width: 768px) { .wc-columns-container .products, .woocommerce .related ul.products, .woocommerce .up-sells ul.products { grid-gap: 20px; } .slideout-navigation.do-overlay .slideout-exit { position: static; text-align: center; } }
Sorry for the long posting. But your test page helped me on my search to replicate it. Removing above CSS code and going for no sidebar on the single product page (which I wanted) fixed it.
April 27, 2020 at 3:34 am #1257454David
StaffCustomer SupportHi there,
Merch used a GP Hook Element to add the Sidebar inside of the Woo Single Product template and that CSS is required to create the Merch single product layout.
Where do you want to add the Sidebar : In the default layout or the Merch layout ? Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 27, 2020 at 7:27 am #1257819Sebastian
Hi David
I use the Merch template as basis and wanted to get rid of the sidebar on the single product page. So I deactivated it in the customizer settings, but didn’t delete the CSS for it. This caused this weird rendering on Safari.
For me it’s good now and we can close this ticket.
Thanks
April 27, 2020 at 7:28 am #1257822Sebastian
Oh, I can mark this topic as resolved by myself.
April 27, 2020 at 7:34 am #1257837David
StaffCustomer SupportGlad to hear that π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.