Max-width on blocks: Centered content layout in full-width website

Description

Starting with the easiest case when we have a full-width content area and applying max-width styles on all elements (blocks) in the article content. This styling method is used also in Gutenberg Starter Theme and, basicaly, even in WordPress admin area when editing post/page with Gutenberg editor.

While it is the easiest method for Gutenberg wide alignment styling, I can't really recollect any WordPress theme using this approach currently. If you are updating your theme to make it "Gutenberg ready", probably check out the other example cases here.

I personally am not real fan of this styling method, though I admit it provides smallest code and works well on full-width and boxed websites (without sidebar).

Disadvantage of this approach could be difficulty to style left and right alignment for some blocks. And surely, this approach would not work on a website with sidebar.

For our additional full-width alignment wrapper (the .align-wrap below) we need to apply slightly more code. Basically, no need to use the wrapper with this layout case.

Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

1.5rem
minimal content horizontal paddings

CSS code

.entry-content > .alignfull {
	width: calc(100% + 2 * 1.5rem);
	max-width: none;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

What if we used additional wrapper?

This CSS code is valid only when we use an additional wrapper around .alignfull blocks.

Wrapped in .align-wrap:
Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

1.5rem
minimal content horizontal paddings

CSS code

.entry-content > .align-wrap {
	width: calc(100% + 2 * 1.5rem);
	max-width: none;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

.align-wrap .alignfull {
	width: 100%;
	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: +5.

Additional wrapper div is not particularly useful with this website layout.

Max-width on blocks: Offset content layout in boxed website

Description

To achieve an indented, offset content layout here we are using relative positioning for each content block and offsetting their left CSS position. Then, for full-width alignment, we reset the left positioning back to zero and apply the styles from example above.

Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

1.5rem
minimal content horizontal paddings

CSS code

.entry-content > .alignfull {
	width: calc(100% + 2 * 1.5rem);
	max-width: none;
	left: 0;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

What if we used additional wrapper?

This CSS code is valid only when we use an additional wrapper around .alignfull blocks.

Wrapped in .align-wrap:
Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

1.5rem
minimal content horizontal paddings

CSS code

.entry-content > .align-wrap {
	width: calc(100% + 2 * 1.5rem);
	max-width: none;
	left: 0;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

.align-wrap .alignfull {
	width: 100%;
	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: +5.

Additional wrapper div is not particularly useful with this website layout.

Max-width on blocks: Website with sidebar

Description

This is also pretty straightforward. Once you set your sidebar layout, it is just a matter of nulling out the right margin on all content blocks (or set it to your needs, such as 30px like in this example).

Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

534px
content area max width
1.5rem
minimal content horizontal paddings

CSS code

/* For completeness here are also block styles: */
.entry-content > * {
	max-width: calc( 534px - 30px );
	margin-left: auto;
	margin-right: 30px;
}

.entry-content > .alignfull {
	width: calc(100% + 1.5rem);
	max-width: none;
	margin-left: -1.5rem;
	margin-right: 0;
}

What if we used additional wrapper?

This CSS code is valid only when we use an additional wrapper around .alignfull blocks.

Wrapped in .align-wrap:
Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

534px
content area max width
1.5rem
minimal content horizontal paddings

CSS code

/* For completeness here are also block styles: */
.entry-content > * {
	max-width: calc( 534px - 30px );
	margin-left: auto;
	margin-right: 30px;
}

.entry-content > .align-wrap {
	width: calc(100% + 1.5rem);
	max-width: none;
	margin-left: -1.5rem;
	margin-right: 0;
}

.align-wrap .alignfull {
	width: 100%;
	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: +5.

Additional wrapper div is not particularly useful with this website layout.