[Support request] WooCommerce products outside screen – mobile.

[Fredrik]

I’ve just noticed that the product grid is overlapping the outside of mobile screens. Tested in firefox(PC), chrome android. Works well on Chrome PC.

There might be an issue here I can’t figure out. This wasn’t here before, so might have come with an update.
https://syttpanytt.se/aterbruksbutiken/

Changing to 1 product works. But changing to 3 products will place the 3rd product completly outside the screen.

[Fredrik]

[David]

Hi there,

can you flush and disable you cache so we can eliminate that as being the cause.
If the problem is still there, leave the cache disabled and let me know and ill take a look

[Fredrik]

Hi David. I’ve disabled Lazy Load, Autoptimize and Comet cache, the problem remains. Let me know if you need admin access.

[Tom]

Hi there,

Can you try adding this CSS?:

#wc-column-container .product {
    word-break: break-all;
}

[Fredrik]

Tom, yes that worked 🙂

[Tom]

Awesome 🙂

[Fredrik]

Well, I discovered that it works, but now I can’t control the paragraph word-break inside the product. When changing to “normal” as I want, It reverts back to being broken.

/* product mobile grid fix */
#wc-column-container .product {
word-break: break-all;
}
/* Trying to fix the word break */
#wc-column-container .woocommerce-product-details__short-description p {
word-break: normal;
}
EDIT: I’ve temporarily fixed it by disabeling your CSS and adding this. Looks half-done. Hope there is a better solution.

.one-container .site-content, .inside-page-header {
padding: 10px;
}

.wc-columns-container .products {
grid-gap: 10px;
}

[Tom]

Can you try this instead?:

body.woocommerce .wc-columns-container.wc-columns-3 .products {
    grid-template-columns: repeat(3,minmax(0, 1fr));
}

Let me know 🙂

[Fredrik]

There might be a parsing error with that CSS, can’t get it to work at all.
“Expected RBRACE at line 2, col 47.”

[Tom]

Does it not allow you to save? The syntax should be fine like that.

If not, can you try adding it to a plugin like Simple CSS or your child theme style.css file?

[Fredrik]

I assumed it was broken since it doesn’t make a difference on the grid. It didn’t work 🙁

[Tom]

Hmm, it works when I add the CSS to your site using developer tools. Can you add the CSS and leave it in so I can take a look? I’m not seeing it right now.

[Fredrik]

It’s now added back in and I’ve disabled my own fix. It’s in the style.css.

[Tom]

Can you try the updated CSS here?: https://generatepress.com/forums/topic/woocommerce-products-outside-screen-mobile/#post-988378

Let me know 🙂

[Author]

Posts