The more I research this the more I'm convinced this is related to the Shortcode block. In this image you will see the block editor with list view. You will note that the 3-column block contains an image in the first column, a Shortcode block and below it the Hand-picked product block in the second column, and a Paragraph block in the third column.
In this image you will see the frontend view of the page. Notice that the image in column one is full column width, the text in column three is full column width, and the Hand-picked product block is full column width. But you can clearly see that the Shortcode block is only 25% of the column width. This is the problem.
In this image of the markup you can see that the Shortcode block has a class of ul.products.columns-4 whereas the Hand-picked product block below has a class of ul.wc-block-grid__products. As you can see in this image, if I change the class of the Shortcode block from ul.products.columns-4 to ul.products.columns-1 it displays correctly (here's the markup showing the class change.)
I hope this illustration helps you to see what the problem is.
Hi @gigitux,
The more I research this the more I'm convinced this is related to the Shortcode block. In this image you will see the block editor with list view. You will note that the 3-column block contains an image in the first column, a Shortcode block and below it the Hand-picked product block in the second column, and a Paragraph block in the third column.
In this image you will see the frontend view of the page. Notice that the image in column one is full column width, the text in column three is full column width, and the Hand-picked product block is full column width. But you can clearly see that the Shortcode block is only 25% of the column width. This is the problem.
In this image of the markup you can see that the Shortcode block has a class of ul.products.columns-4 whereas the Hand-picked product block below has a class of ul.wc-block-grid__products. As you can see in this image, if I change the class of the Shortcode block from ul.products.columns-4 to ul.products.columns-1 it displays correctly (here's the markup showing the class change.)
I hope this illustration helps you to see what the problem is.
Originally posted by @banacan in https://github.com/woocommerce/storefront/issues/2012#issuecomment-1234521816