Job a11n
(@jobthomas)
Automattic Happiness Engineer
Hi there, I was able to reproduce this.
Link to image: https://d.pr/i/GM6ZXn
This is technically not a Storefront, but a WooCommerce Blocks issue. The styling comes from the Blocks plugin:
Link to image: https://d.pr/i/nK4Sj0
With this intermediate step, the blocks team has tried to make the transition smoother from X (the amount of columns you’ve selected) via 2 to 1 column. However, I see that with 3 as the column amount this is not a nice experience.
I’ve opened a GitHub issue with this report: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1619 – I’ll mark this thread as resolved; the discussion can continue in that section.
Hi Job,
Thank you SO much for replying – I really appreciate it.
However – on my site it doesnt work regardless of how many products are in my block.
It does work on Chrome Developer mode – but it doesnt on an actual mobile browser where it does push one product down.
I understand that this is a Blocks problem and thank you for making the Github request. I just thought I would clarify the issue.
Best,
Job a11n
(@jobthomas)
Automattic Happiness Engineer
Hey @sixteenmartino – thanks for the extra details. Did you add any custom CSS to this? If so, can you share that with me? That’d make it easier to reproduce the issue. I can indeed see that it’s not happening on DevTool, but it is happening on mobile devices. I think it might be due to something in the media queries, but I’d like to see the CSS to confirm.
Hi Job –
No, no extra CSS added.
I am happy to give you access to the whole site if needed!
Let me know if you need me to send any files/CSS.
Thank you again for your help.
Job a11n
(@jobthomas)
Automattic Happiness Engineer
It seems that you’ve disabled this block on your homepage and set your current block to only display on desktop. Is that correct?
I was able to reproduce the issue you had on my mobile devices, but not on my own site.
Hi Job,
I have just stopped using the blocks for now as it was frustrating me.
They are still in use on my pages such as here
And on any browser on desktop it works as expected (GREAT!!)
However on ANY mobile device it now puts them one by one – which causes excessive scrolling when most phones now can handle 2 products without it looking terrible.
Not sure what else to try!
Thank you for your on-going help!
Oli
Job a11n
(@jobthomas)
Automattic Happiness Engineer
Hey @sixteenmartino – as mentioned in the GitHub issue, there’s a fix ready and it’ll be included in the next version of Storefront: https://github.com/woocommerce/storefront/pull/1217
The only solution would be to already include the CSS to fix this in your theme. You can find out what was done here: https://github.com/woocommerce/storefront/pull/1217/files
Hey @jobthomas
Thank you – glad to hear it will be fixed.
I have found a work around. Please set this as a solution for now if possible.
1) Dont use Woocommerce blocks – but instead use their shortcodes.
2) Add the following to the additional CSS:
`ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}
ul.products li.product:nth-of-type( 2n ) {
margin-right: 0;
}
@media ( min-width: 768px ) {
ul.products li.product:nth-of-type( 2n ) {
margin-right: 5.8823529412%;
}
}
This displays 2 columns – does it well!
Hope this helps for some people!
Thank you for all your help!
Job a11n
(@jobthomas)
Automattic Happiness Engineer
Oh! Nicely done. Yeah, that would indeed be a good temporary solution while you wait for the next fix of Storefront. I’ll mark this thread as resolved in the meantime though. All the best!
guys this is flying my head, I need to set up 2 columns, I use storefront, I use your shortcode but my site still showing just a one column on mobile version, please help me 🙁
Okay – so that CSS needs to be added to your additional CSS area in the theme customiser.
Then instead of using the Woocommerce blocks – add a short code from the ‘Woocommerce shortcodes’ found here:
https://docs.woocommerce.com/document/woocommerce-shortcodes/
ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}
ul.products li.product:nth-of-type( 2n ) {
margin-right: 0;
}
@media ( min-width: 768px ) {
ul.products li.product:nth-of-type( 2n ) {
margin-right: 5.8823529412%;
}
}
that code?
`ul.products li.product {
width: 46.411765%;
float: left;
margin-right: 5.8823529412%;
}
ul.products li.product:nth-of-type( 2n ) {
margin-right: 0;
}
@media ( min-width: 768px ) {
ul.products li.product:nth-of-type( 2n ) {
margin-right: 5.8823529412%;
}
}
do u know how to hide a button “add to cart” from shortcodes? or resize the tipography of button, I need that see ok on mobile and it’s so big button to mobiles.
Annoyingly this isn’t doable on the short codes – I wanted the same!!
Just have to wait until they update it which will fix it.
It’s just a quick fix for now!
