Alignwide and full without transform

[davidsword]

Thank you for this theme, it's great.

I had some troubles with a alignwide gallery, the transform -50% took the gallery off screen (on a 1440px wide monitor).

Instead of setting a primary wrapper/container with the width, and transforming alignwide/full out of it, why not set the container to be full width, then set the blocks width instead?

Here's some overwriting CSS appended to site that fixed the issue for me:

html #page {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}
html #primary {
    width: auto;
}
html .entry-content > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
    width: 780px;
}
html .entry-content > .alignwide {
    max-width: 90%;
    transform: none !important;
    width: 1440px;
}
html .entry-content > .alignfull {
    max-width:100%;
    transform: none !important;
    width: auto;
}

I know this doesn't factor in the "set width" setting in Customizer, this is my use case and just for a code-example.

Again, great theme, thank you so much for making and releasing it.

[mikemcalister]

Hey David,

Thanks for the feedback! I've seen this wildcard selector method floating around for Gutenberg (and even tried it briefly), but I generally try to avoid any CSS that includes a wildcard like that, if possible. Especially when we'd be targeting every element put into the content area. I think that's going to cause some hiccups down the line when more and different types of content end up in there.

In my opinion, it makes sense to break out the content you need to, instead of forcing a wildcard on everything else to account for the rare full-width or wide-width elements.

I'm definitely open to the wildcard idea though, and would like to explore it a bit more to see if we could work some of those kinks out.

I'll take a look at that gallery issue and see what's up. Thanks for the report!

[davidsword]

All good points, and thanks!

[davidsword]

I actually reverted back to the themes default. An inline image with alignright would have no container and hug the edge of the screen instead of the paragraph its beside - more or less as you indicated might be the case.

If you're able to reproduce the alignwide gallery issue I describe, I patch it with:

transform: translateX(calc(-49.5vw + 400px))

(where 400px is 1/2 of the containers width).

[webmandesign]

Hey guys,

I've created a pull request removing transformX styles from .alignfull and .alignwide classes due to https://codepen.io/webmandesign/post/gutenberg-full-width-alignment-in-wordpress-themes#where-are-the-other-block-examples-2

To fix the issue of full/wide Gallery alignment in the theme, the margins need to be edited or a different approach used (such as positioning such gallery relatively with negative left/right position and setting the width accordingly for each alignment class, such as width: calc( 100% + 16px ); for .alignfull).

[dartiss]

I've also come here to report this - I've used full width on a gallery and it's, well, not display correctly (I assume it's the same issue as being reported here).

It displays correctly on the front-end.

[mikemcalister]

Hi there,

These alignment issues were fixed in version 1.2.2! Thanks for your patience on this fix everyone!