setfiretothesky

For anyone using Astra and seeing problem 1 (the product columns cut in half) on mobile as well, I put this in my “Additional CSS” section at and it worked great.

Appearance -> Customize -> Additional CSS

.woocommerce-page.columns-4 ul.products li.product, .woocommerce.columns-4 ul.products li.product, .woocommerce div.product .related.products ul.products li.product, .woocommerce.mobile-columns-2 ul.products li.product, .woocommerce-page.mobile-columns-2 ul.products li.product, .woocommerce[class*="columns-"].columns-3 > ul.products li.product, .woocommerce[class*="columns-"].columns-4 > ul.products li.product, .woocommerce[class*="columns-"].columns-5 > ul.products li.product, .woocommerce[class*="columns-"].columns-6 > ul.products li.product {
	width: auto !important;
}

For some reason in the original it says width: calc(50% - 10px) and this causes the columns to display at half the size. The CSS above overrides this and my shop looks normal again with 2 columns on mobile and 4 columns on desktop.

I came here with the same issue (flyout basket in Elementor covered by the label) and am glad I found this thread. Setting Z index: 5 fixed it for me.

@rafinkhan thanks for your help. I can confirm I no longer see the issues. I’d still love to see you decrease the timeout from its 15 seconds to something like 2-5 seconds. This would still be annoying but not feel like an eternity.

Cheers