[Support request] Mobile column not work well

[Sandro]

Hi, I’m trying to set the columns from the shop page, under 778 pixels there is only one column while I would like 2, under 480 pixels 1 column. I’m trying to modify the css but the css in your woocommerce folder always has the precency.
I put the link of the hidden site but you have to be logged in to see it, at the moment I can’t publish it.
I ask for your help. thank you

[Tom]

Hi there,

We changed the way columns work in WooCommerce in our GPP 1.8 update, which is currently available for testing: https://generatepress.com/gp-premium-1-8/

Then you can:

1. Set your mobile columns in the GPP settings to 2.

2. Add this CSS:

@media (max-width: 480px) {
    .woocommerce #wc-column-container.wc-mobile-columns-2 .products, 
    .wc-related-upsell-mobile-columns-2 .related ul.products, 
    .wc-related-upsell-mobile-columns-2 .up-sells ul.products {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

[Sandro]

Hello, thanks for the support.
The problem unfortunately remains, under 780 pixels there is only one column at full width, I would like instead that between 770 and 480 the columns are 2.
How do you set it up?

[Tom]

Did you set the mobile columns to 2 in Customize > Layout > WooCommerce?

[Sandro]

Yes, i did. on mobile is always one column.
I have tried to delete my CSS but is the same result.
Do you want my admin access?

[Tom]

I shouldn’t need admin access, but access to the site (there’s a coming soon page up) would be good. Any chance you can send that to us?: https://generatepress.com/contact

Be sure to mention this topic 🙂

Thanks!

[Sandro]

Hi, I write about the report made in the last few days.
I have set up two columns of products for the mobile version, but in reality the column is always unique.
Actually I would like for the mobile version to have a column while for the tablet version (up to 767px) the columns would like two.
From panel this thing is not possible, I tried from CSS but there is always the CSS of Woocommmerce of the theme that has precedence.
I look forward to your help, thanks

[Tom]

Hi there,

So anything under 767px would be 1 column? I should be able to help with this if I can see your site.

Let me know 🙂

[Sandro]

I have found the solution.
The only problem is that I have to give a minimum height to the text otherwise the products do not train properly.
For example in a row, without the minimum text height, some products would be on their own, their next product would be in the line below.
Practically some lines are from two products other than one.

[Tom]

Can you show me an example of the issue?

[Author]

Posts