Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect breakpoint padding/margin-right on Gutenberg #2125

Open
2 tasks done
webdados opened this issue Oct 3, 2023 · 0 comments
Open
2 tasks done

Incorrect breakpoint padding/margin-right on Gutenberg #2125

webdados opened this issue Oct 3, 2023 · 0 comments

Comments

@webdados
Copy link

webdados commented Oct 3, 2023

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-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:
image
This does not happen on the default 2023 theme.

And only below 600px we're getting the correct alignment (no padding-right):
image

Isolating the problem (mark completed items with an [x]):

  • I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
  • I can reproduce this bug consistently using the steps below.

To Reproduce

Steps to reproduce the behavior:

  1. Create a columns block with 2 columns and a big image inside each one
  2. Resize the browser to any size between 600px and 781px
  3. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant