Full-width website with content container: Centered content layout

Description

This is probably the most used styling approach in WordPress themes without a sidebar. The page content is actually encapsulated in a container with a specific max-width.

To style our full-width Gutenberg alignment class we need to "break free" from the content container, which is again pretty easy to achieve.

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) and styles not really working for pages with sidebar.

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

Fullwidth Cover Image
with fixed background

CSS code

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

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

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

.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: +4.

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

Full-width website with content container: Offset content layout

Description

To achieve an indented, offset content layout here we are setting a left padding on the content area.

As you can see, H2 headings break free from this indentation, and the same would probably be applied on .alignwide alignment.

For full-width alignment we need to find the center of the website (of the viewport, actually) and then apply the same approach as in the example above. Below you can find a quick tip on how to calculate the website center for this layout case.

Fullwidth Cover Image
with fixed background

CSS code prerequisites

Change these values in the code to your needs.

min-width: 900px
there is no offset/indented content layout below this breakpoint
25.094%
center of content, compensated for offset/indented content layout; calculation (works only with max content indentation of 50%):
( 50 - Content_Indent_% ) / ( 100 - Content_Indent_% )

CSS code

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

@media screen and (min-width: 900px) {
	.alignfull {
		margin-left: calc(25.094% - 50vw);
	}
}

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.

min-width: 900px
there is no offset/indented content layout below this breakpoint
25.094%
center of content, compensated for offset/indented content layout; calculation (works only with max content indentation of 50%):
( 50 - Content_Indent_% ) / ( 100 - Content_Indent_% )

CSS code

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

@media screen and (min-width: 900px) {
	.align-wrap {
		margin-left: calc(25.094% - 50vw);
	}
}

.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: +4.

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