remove-full-width-image-mobile-margin-1585: remove full width image block margins on mobile

[9ete]

Moved styles targeting entry content full width images from applying only on 1024+ to apply on all viewport sizes. This fixes the issue of image blocks marked as full width not going full width on mobile.

Steps to test the fix (originally posted here: #1585 (comment)):

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

Before Fix

After Fix

[9ete]

@opr for issue: #1585

[opr]

Hi @hawkeye126 thanks for making this PR! It would be really useful if you could edit the PR description to include a summary of what you changed and to add some testing steps. If you ping me back when you've done this I'll be able to take a look.

[9ete]

@opr Done, thanks for the feedback and reviewing! Please let me know if I can provide any further detail.

[opr]

Thanks @hawkeye126 - I've tested this and it looks to be working well! 👏🏼 Congratulations on your first PR to Storefront! 🥳

I also ran npm run lint:css on my local machine and it passes. The job fails in GitHub due to permission errors I believe. More information on why the linting job failed: actions/first-interaction#10

[vanderwijk]

There seems to be an issue with this on my site. After updating to 3.8.0 my full width cover block is no longer spanning the full width of the page. This is because the width is set to 100% instead of auto.

Adding auto width fixes this for me:

.storefront-align-wide.page-template-template-fullwidth-php & .alignfull, .storefront-align-wide.storefront-full-width-content & .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: auto; }