[Resolved] Alignfull with Gutenberg

[Ryan]

I didn’t realize your theme actually supported Full Width option for gutenberg blocks until I just tried it, thanks for adding support for these features. I noticed with the columns block that the full width options works, but the wp-block-columns have a margin left of 40px. That means the first column has a 40px left margin but the last column doesn’t have a 40px right margin. I was thinking of fixing it with .alignfull margin-right: calc(-100vw/2 + 100%/2 + 40px); but you might have a better solution. Obviously that won’t work after the columns collapse and might cause other problems.

[Tom]

Hey Ryan,

Every column will have margin-left attached to it.

I just checked out your columns and all looks good? Can you show me a screenshot of the issue possibly?

Let me know 🙂

[Ryan]

I’m not actually using the full width block. I will attach a screenshot of what happens if I do. There is a left margin but no right margin which just visually looks bad everything is off center. It’s only a problem again when using a wide or full width block because of the way it changes the css to flow outside the normal container. https://www.ryansmithphotography.com/wp-content/uploads/2018/12/Screen-Shot-2018-12-26-at-2.54.44-PM.png

[Tom]

Ah yes – there is no right margin on columns. You’d need to apply right padding/margin to the column container using CSS in this case.

I’ll play with it to see if it’s something we should add to the theme.

[clemens]

Hey Tom, I have the same problem and try to solve this.
While reading this topic and several topics about Gutenberg about columns i can not find where and what to change.
Can you assist me where to make changes and give example code. Also check if this still works when changing to mobile size.

[David]

Hi there,

can you start a new topic where you can share your Site URL privately, we can then assist with the CSS.

[Ryan]

This is still an issue with the latest version. Can you see if this is something you can fix?

Edit: Never Mind, I realized you did fix this and it was a previous fix I added manually that was causing an issue, thanks!

[Stacey Usborne]

Glad you got this fixed 🙂

[Author]

Posts