For the output of post content, the main column is constrained to 700px. This allows for images etc. to be aligned left and right whilst remaining within the content column.

Adding a solution using a combination of left and translateX to “stretch” the width of elements marked with .alignwide or .alignfull outside the containing column works fine. However, when the element - e.g. a Cover Block - is marked with the class name has-parallax to allow a background image with background-attachment: fixed, the background image is also transformed relative to the browser window and hence cropped.

Does anyone understand why this is the case, or have a solution? A very simplified example of this occurrence is in this Pen:

For the output of post content, the main column is constrained to 700px. This allows for images etc. to be aligned left and right whilst remaining within the content column.

Adding a solution using a combination of left and translateX to “stretch” the width of elements marked with .alignwide or .alignfull outside the containing column works fine. However, when the element - e.g. a Cover Block - is marked with the class name has-parallax to allow a background image with background-attachment: fixed, the background image is also transformed relative to the browser window and hence cropped.

Does anyone understand why this is the case, or have a solution? A very simplified example of this occurrence is in this Pen: https://codepen.io/permanenttourist/pen/LYVZOpN?editors=1100

• css
• block-editor
• front-end

Share Improve this question edited Feb 20, 2020 at 12:50 Tom J Nowell♦ 61.1k77 gold badges7979 silver badges148148 bronze badges asked Feb 18, 2020 at 15:55 Mark Howells-MeadMark Howells-Mead 31522 silver badges99 bronze badges 2

• is this a frontend issue or a block editor issue? If this is an issue in stock Gutenberg you can raise a GitHub issue to get it resolved – Tom J Nowell ♦ Commented Feb 18, 2020 at 16:13
• Frontend. I've since found a better solution, which uses negative margins to “stretch” the elements in question. The Codepen at codepen.io/permanenttourist/pen/LYVZOpN?editors=1100 is updated with the improved solution. – Mark Howells-Mead Commented Feb 19, 2020 at 17:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I've since found a better solution, which uses negative margins to “stretch” the elements in question. The Codepen at https://codepen.io/permanenttourist/pen/LYVZOpN?editors=1100 is updated with the improved solution.