Description

Things are getting a bit more complicated with boxed website layout and page content encapsulated in a container of a specific max-width.

To style our full-width Gutenberg alignment class we need to "break free" from the content container, but keep its max-width the same as our boxed website container max-width.

Disadvantage of this approach could be a possible horizontal scrollbar displayed in web browsers on Windows operating system (check the "About" page for how to resolve).
Also notice the special media query used in the CSS code and find additional information below.

Our full-width alignment wrapper (the .align-wrap) helps us quite a lot with this layout case, eliminating need for a special media query.

CSS code prerequisites

Change these values in the code to your needs.

min-width: 600px

there is no boxed website horizontal margin below this breakpoint

2rem

boxed website minimal horizontal margins

min-width: 1344px

special breakpoint required for boxed websites; calculated as Site_Container_Width + 2 * Site_Min_Margin

16px

base font size

1280px

boxed website container max width

CSS code

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

@media screen and (min-width: 600px) {
	.alignfull {
		max-width: calc(100vw - 2 * 2rem);
		margin-left: calc(50% - 50vw + 2rem);
	}
}

/**
 * Special media query here!
 * For matching boxed website container width when
 * `.alignfull` gets wider than the website container
 * with its minimal horizontal margins.
 *
 * 1280px + 2 * 2rem = 1280px + 2 * 2 * 16px = 1344px
 */
@media screen and (min-width: 1344px) {
	.alignfull {
		max-width: 1280px;
		margin-left: calc(50% - 1280px / 2);
	}
}

Please notice the special media query. In our specific styling case is the query pretty "fragile", as it's being calculated from values of mixed units.

We have a website container max-width set in pixels and minimal website container horizontal margin set in rem units. The fragility of this media query is obviously in cases when base font size changes. We would basically need to recalculate its value again. And, unfortunately, we still can not use calc() in CSS media queries.

Solution to this would be either not to mix units, or using additional wrapper div for more flexibility.

What if we used additional wrapper?

With additional wrapper there is no fragility in the CSS code. And the styles are more flexible.

CSS code prerequisites

Change these values in the code to your needs.

min-width: 600px

there is no boxed website horizontal margin below this breakpoint

2rem

boxed website minimal horizontal margins

1280px

boxed website container max width

CSS code

.align-wrap {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

@media (min-width: 600px) {
	.align-wrap {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.align-wrap .alignfull {
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
}

You should use either this or the previous non-wrapper CSS code, depending on whether there is a wrapper div. Do not use both of them. If you want to introduce a wrapper div on your website front-end now (with Gutenberg 3.6.2), I've created a useful function for you.

Number of lines of code compared to non-wrapper CSS: -2.

What an elegant solution with the wrapper div here :)