Negative Margins behave unresponsively

[beafialho]

Description

When trying to create a layout using negative margins, the Columns block is not working well ideally on mobile:

Desktop	Mobile

The intended look would be something like the following:

Option 1	Option 2

Step-by-step reproduction instructions

1. Copy the markup:

<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"verticalAlignment":null,"align":"wide","style":{"spacing":{"margin":{"bottom":"-50px"}}}} -->
<div class="wp-block-columns alignwide" style="margin-bottom:-50px"><!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:image {"id":10,"sizeSlug":"full","linkDestination":"none","style":{"spacing":{"margin":{"top":"0px","bottom":"0px","right":"-130px"}}}} -->
<figure class="wp-block-image size-full" style="margin-top:0px;margin-right:-130px;margin-bottom:0px"><img src="http://tt5.local/wp-content/uploads/2024/08/image-404.webp" alt="" class="wp-image-10"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"is-style-section-3","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group is-style-section-3" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading -->
<h2 class="wp-block-heading">This is a heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a paragraph that will overlap the image on the left, hopefully. But no, well, not on mobile.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

2. Paste it in the editor.
3. Notice on Tablet and Mobile how the layout scales badly.

Screenshots, screen recording, code snippet

negative-margins.mp4

Environment info

• Theme: 2025
• Gutenberg version: 19.6.0
• WordPress version: 6.7 Beta

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[hanneslsm]

I tested the code and cannot see a bug.
Not going into the argument about responsive controls, but I think all is intended behavior.

[yogeshbhutkar]

Thank you @hanneslsm for raising this discussion. I would like to share my perspective on this matter.

I believe the primary goal should be to empower users to accomplish their design objectives directly within the Editor, minimizing their reliance on custom code implementation.

Regarding the issue raised by @beafialho - thank you for raising the issue. My basic analysis reveals that while negative margins are functional on mobile devices, they currently maintain their horizontal orientation rather than transitioning to vertical alignment when stacked. ( i.e., if left and right margins are provided on desktop, they remain left and right on mobile as well )

Rather than implementing a hardcoded solution for the horizontal-to-vertical transition logic, I believe we can introduce a more flexible approach: a checkbox control that would allow users to specify whether margins should be inverted when content stacks on mobile devices. This would provide users with greater control over their responsive layouts. Alternatively, we can have an option to provide margins with regard to different screen sizes natively.

[beafialho]

the primary goal should be to empower users to accomplish their design objectives directly within the Editor

I agree, that's why I have reported this.

I believe this falls in the grey area between enhancement and bug. However, this seems related to the broader issue of lack of responsive control, and could be solved if something like this was implemented.

[beafialho]

That said, given that #19909 exists, there probably isn't an action item for this issue, it is rather a reinforcement of the need for it to be addressed more holistically.

[Mayank-Tripathi32]

I also feel this issue needs to be addressed more broadly. The lack of editing options on mobile and tablet makes things difficult, but if needed, we could consider a checkbox approach as well but it wont be really ideal.

[carolinan]

I don't think it can be assumed that a horizontal negative margin should be switched to a vertical negative margin on smaller screens:
Different designs as well as different users will have vastly different needs and expectations.

[jasmussen]

Great conversation, thanks for opening. I'd tend to agree with the feedback given, that there isn't a specific action item to address for the negative margins + columns block combo.