Description
A core Image block set to Full width does not render truly edge-to-edge. It has a small gap (~7.5px) on the left and right, so the image never touches the viewport edges. It is most noticeable on mobile, where the gap is proportionally larger.
Cause — the base alignment rule in assets/scss/components/main/_gutenberg.scss (compiled into style-main-new.css):
.alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0 7.5px; /* applied to every .alignfull element, including images */
}
Because image blocks are box-sizing: border-box, that 0 7.5px padding sits inside the 100vw and insets the image by ~7.5px per side.
The 0 7.5px gutter is reasonable for full-bleed text/groups/covers (breathing room, and it softens the horizontal overflow 100vw can cause when a scrollbar is present). But for full-width images, users expect true edge-to-edge, so it reads as an unwanted gap.
Step-by-step reproduction instructions
- Activate Neve
- Create a Page, add a core Image block, upload a wide image.
- Set the image alignment to Full width (adds .alignfull to the ).
- Publish and view on the front end, ideally at a mobile width (~375-400px).
- Observe the ~7.5px gap on each side; the image does not reach the screen edges.
- Confirm in DevTools: inspect the → Computed → padding-left: 7.5px, padding-right: 7.5px from .alignfull { padding: 0 7.5px }.
Screenshots, screen recording, code snippet or Help Scout ticket
Customer report: https://secure.helpscout.net/conversation/3368762279/
Environment info
https://pastebin.com/30GpUci1
Is the issue you are reporting a regression
No
Description
A core Image block set to Full width does not render truly edge-to-edge. It has a small gap (~7.5px) on the left and right, so the image never touches the viewport edges. It is most noticeable on mobile, where the gap is proportionally larger.
Cause — the base alignment rule in assets/scss/components/main/_gutenberg.scss (compiled into style-main-new.css):
Because image blocks are box-sizing: border-box, that 0 7.5px padding sits inside the 100vw and insets the image by ~7.5px per side.
The 0 7.5px gutter is reasonable for full-bleed text/groups/covers (breathing room, and it softens the horizontal overflow 100vw can cause when a scrollbar is present). But for full-width images, users expect true edge-to-edge, so it reads as an unwanted gap.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet or Help Scout ticket
Customer report: https://secure.helpscout.net/conversation/3368762279/
Environment info
https://pastebin.com/30GpUci1
Is the issue you are reporting a regression
No