Products not aligned

Hi, are you still seeing this issue? I visited your site in Chrome and decreased the page width and wasn’t able to replicate the 4th product jumping down to the next line like shown in the picture.

Have you ensured that your browser cache is cleared or that you’re able to see this in a private/incognito window?

Hi, thanks for the fast response.

I cleared the cache but still see this issue on my iphone in safari as well as google chrome app. Unfortunately incognito mode does not make a difference.

In safari on mac its also jumping down to the next line. Only browser thats displaying it normally is chrome on mac, with chrome it looks fine.

Which iPhone are you using? I loaded up the homepage on my iPhone 7 using Safari and under the ‘Neue Artikel’ heading I only see the Supreme Smoke Tee listed that span across the width of the screen.

The other products you show in the screenshot aren’t listed within that section. Or maybe you’ve made changes recently which is why I’m not seeing the content as shown in the screenshot?

Hello,

I am using an iPhone 11 and the latest iOS 13.

Yes you are right, because I cannot manage to resolve this problem, I started to list the products one below the other.

Here is a example site for experimental purposes with the problem: https://shop.spreme.de/testing/ (Password is testingspreme3)
The product is still jumping down to the next line.

Is this a CSS issue? Can I somehow report to this to WooCommerce? Hope there is a update on soon. I also got YellowPencil, could I edit it with this tool?

Ps: I tried a few Woocommerce-optimized Themes and just seeing problems with each and every one. I like Flatsome because the design is very clean and I THOUGHT it would work flawless with woocommerce but as I see now it also got its problems….Do you know a very good theme for woocommerce? Any recommendations? Would also pay for one that works great.

Thanks for all your help!

I think your issue may be related to this one already reported to them:

https://github.com/woocommerce/woocommerce/issues/24444

It looks like you can try this CSS suggested in there

@media only screen and (max-width: 600px) {
	.wc-block-grid.has-4-columns .wc-block-grid__product {
		flex: 1 0 100%;
    max-width: 100%; 
	}
}

I added the CSS in the customizer and cleared the cache. Unfortunately this doesnt work. Is there a contact for Storefront-related problems, maybe they can help me or they can fix this problem.

Again thanks for your time.

Hi, sorry to hear that didn’t work for you. As far as contact for Storefront related issues, using this support forum is probably the best way. Though based upon that reported issue in the Github I linked, the issue is actually related to WooCommerce and not Storefront specifically.

I imagine once the fix is added into WooCommerce it should resolve the issue in Storefront as well.

Hey @spremede – as @jarretc mentioned, this is not entirely related to Storefront. The GH issue has been closed meaning that our devs have fixed it. I’ve left a more detailed response on this thread regarding the same topics: https://www.ads-software.com/support/topic/homepage-products-not-responsive-on-iphone-or-safari-desktop/#post-12058205

Given that this is also not a problem with Storefront but with WooCommerce and this is the Storefront forum, I’m marking this as resolved.

Alright thanks for your time

Hello,

this problem still isnt solved.

I tried this code:

@media (max-width: 724px) {
    .wc-block-grid__product {
        flex-basis: 100% !important;
        max-width: none !important;
    }
}

as well as

@media only screen and (max-width: 600px) {
	.wc-block-grid.has-4-columns .wc-block-grid__product {
		flex: 1 0 100%;
    max-width: 100%; 
	}
}

and both do not work. Can someone finally fix this? Thanks a lot

Hey @spremede sorry for the slow response. I’ve marked this as resolved again as this thread is not connected to Storefront, but to WooCommerce Blocks. WooCommerce 3.9 is about to release; I’d suggest to first wait until that goes live and then see if the problem is persistent. If it is, please open a thread in the WooCommerce Block forum. Thanks.

finally resolved with a theme update today, thx

and the issue came up again…. thought it was fixed…

• This reply was modified 5 years ago by spremede.