When trying to create a layout using negative margins, the Columns block is not working well ideally on mobile:
<!-- 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 -->
Description
When trying to create a layout using negative margins, the Columns block is not working well ideally on mobile:
The intended look would be something like the following:
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
negative-margins.mp4
Environment info
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.