Full-width Elements Have Margins on Mobile View

[robertocyrino]

Describe the bug

If you add a full width element to a site using the latest Storefront theme, 3.3.0, it will show margins on both sides for mobile view.

• [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:

1. Add an Image block to a new page, set it to full width;
2. Make sure the page's template is also set to Full Width, and save/publish the changes;
3. Open the created page on a browser with at least 1064px width. Verify that the image is full width.
4. Switch to browser responsive mode and reduce the screen size to 1063px width or less. Verify that there are margins on both sides.

Screenshots

Full Size: https://d.pr/i/826xAu

Expected behavior

Full width elements should stay full width in mobile view, as it happens with different themes such as Twenty Twenty-One.

Browser Environment

Firefox 84.0.2 (64-bit), macOS 10.15.7

WordPress Environment

WordPress 5.6 WooCommerce 4.9.0 Storefront 3.3.0

3648664-zen / 25542112-hc

[mikeicode]

For the example above it appears the CSS which makes the blocks full width is within a media query causing this issue (not sure if that's intentional):

We added this to the site to resolve:

.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
}

[Aljullu]

Thanks for filling this issue @robertocyrino and for the work-around @mikeicode.

it appears the CSS which makes the blocks full width is within a media query causing this issue (not sure if that's intentional)

I'm confused by this as well, I think it should be safe to remove it and let styles be applied in all viewport sizes. Do you want to open a PR fixing this? :slightly_smiling_face:

[Aljullu]

I'm assigning high priority because this is an issue in a core Gutenberg functionality and I imagine it has a big impact, but it looks like this has been working like that for several versions, so it's not a recent regression.

[9ete]

@robertocyrino @mikeicode @Aljullu PR to resolve issue open here: https://github.com/woocommerce/storefront/pull/1713