[Support request] WooCommerce products outside screen – mobile.

[Fredrik]

It works only if I add !important. I changed it to 2 columns instead of 3, but used a mobile breakpoint. the Desktop view is fine.

https://syttpanytt.se/butik/

I also change the gap and padding to make the products fit better. Isn’t there a setting to change the product gap for mobile view?

/* WOO COLUMN GRID FIX */

@media (max-width: 768px) {

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

.one-container .site-content, .inside-page-header {
    padding: 10px;
}
	
.wc-columns-container .products,
.woocommerce .related ul.products, .woocommerce .up-sells ul.products {
    grid-gap: 10px !important;
}
}

[Tom]

Good to know – seems like a bug in CSS Grid. We’ll get this fixed in GPP 1.9.

There isn’t a gap option right now, but we’ll be adding that to 1.9 as well.

[Tom]

Hi there,

GP Premium 1.9.0-alpha.1 is available for testing. It has a fix for this issue: https://generatepress.com/forums/topic/gp-premium-1-9-0-available-for-testing/

Let me know if you’re able to give it a try 🙂

[Fredrik]

Tom, I’ve just tried the 1.9.1 update and this issue still there.

Latest GP Premium, Latest theme. Cleaned cache before and after activation. Once my CSS is removed, the issue appear again.

I.E; On the phone, with 2-column products, the second product is half outside the screen.

[Tom]

On this site?: https://syttpanytt.se/butik/

I’m not seeing any issues on that page.

Let me know 🙂

[Fredrik]

That’s because I have the css you provided earlier active 🙂

[David]

Hi there,

can you remove ( comment out ) the CSS Tom provided then clear and disable autoptimize cache so we can take a look?

[Fredrik]

Sure. It’s done.
https://syttpanytt.se/butik/

[David]

Still seeing Autoptimize – can you disable the plugin?

[Fredrik]

ah sorry. It’s disabled.

[David]

It looks as though the issue is still related to the word-break – i am not sure why the columns CSS provided before worked and the updated theme code deosnt, was the word break CSS still have been in place?

Try adding this CSS to cure the word break issue:

.woocommerce-product-details__short-description {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

[Fredrik]

I’ve turned off all CSS and only applied your CSS, the products are still outside screen on phones.

[David]

Have you cleared your browser caches as its working for me. Double check by opening in a private/incognito browser which doesn’t cache pages.

If still an issue, which device / browser can you see the problem?

[Fredrik]

The issue is only visible on a physical device, not in the simulated window in the browser.
My client have the issue on her iphone, I have the issue om my Huawei P20, Google chrome.
It’s also visible on Samsung S7 Chrome.

[Tom]

Hi there,

Can you try this instead?:

.woocommerce-product-details__short-description, 
.woocommerce-loop-product__title {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Let me know 🙂

[Author]

Posts