When using the block editor, the breakpoint used to collapse (for example columns) is 782px.
From 782px up, the CSS for .wp-block-columns is flex-wrap: nowrap!important (set by wp-includes/css/dist/block-library/style.css)
Yet on storefront/assets/css/base/gutenberg-blocks.css a padding-right of 4.347826087% is being set on .hentry .entry-content .wp-block-columns .wp-block-column:not(:last-child), .editor-styles-wrapper .wp-block-columns .wp-block-column:not(:last-child) for 600px and above.
Shouldn't this be the same breakpoint as the one set globally for Gutenberg?
The result on a screen between 600px and 781px is this:
This does not happen on the default 2023 theme.
And only below 600px we're getting the correct alignment (no padding-right):
Isolating the problem (mark completed items with an [x]):
[x] I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
[x] I can reproduce this bug consistently using the steps below.
To Reproduce
Steps to reproduce the behavior:
Create a columns block with 2 columns and a big image inside each one
Resize the browser to any size between 600px and 781px
See incorrect padding-left on the first column
The columns block is just an example. As far as I was able to investigate, this happens with all the blocks that have a different
CSS for mobile/desktop. 781->782px on wp-includes/css/dist/block-library/style.css and 599->600px on storefront/assets/css/base/gutenberg-blocks.css
(or am I missing something here?)
WordPress, WooCommerce and Storefront on latest versions.
Describe the bug
When using the block editor, the breakpoint used to collapse (for example columns) is 782px.
From 782px up, the CSS for
.wp-block-columnsisflex-wrap: nowrap!important(set by wp-includes/css/dist/block-library/style.css)Yet on storefront/assets/css/base/gutenberg-blocks.css a
padding-rightof4.347826087%is being set on.hentry .entry-content .wp-block-columns .wp-block-column:not(:last-child), .editor-styles-wrapper .wp-block-columns .wp-block-column:not(:last-child)for 600px and above.Shouldn't this be the same breakpoint as the one set globally for Gutenberg?
The result on a screen between 600px and 781px is this:
This does not happen on the default 2023 theme.
And only below 600px we're getting the correct alignment (no padding-right):
Isolating the problem (mark completed items with an [x]):
To Reproduce
Steps to reproduce the behavior:
The columns block is just an example. As far as I was able to investigate, this happens with all the blocks that have a different CSS for mobile/desktop. 781->782px on wp-includes/css/dist/block-library/style.css and 599->600px on storefront/assets/css/base/gutenberg-blocks.css
(or am I missing something here?)
WordPress, WooCommerce and Storefront on latest versions.