Fullwidth website with sidebar

Description

Buckle up! We have a website with page content of a specific max-width, but we are also displaying sidebar…

Honestly, I'm not really sure how should I define and approach a "full-width alignment" with this website layout. Seeing the Cover Image block examples below will tell you much more than my words.

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), special media queries (additional information below), and complicated calculations especially with boxed website layout.

Our full-width alignment wrapper (the .align-wrap) helps us quite a bit with 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 sidebar layout below this breakpoint
.62
in website layout with sidebar this is calculated as 100 / Primary_Content_Width_% (if your content and sidebar width is set in percent; usually, "primary" stands for the actual page content area and "secondary" stands for sidebar)

CSS code

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

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

Wasn't that bad, was it? :)

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 sidebar layout below this breakpoint
.62
in website layout with sidebar this is calculated as 100 / Primary_Content_Width_% (if your content and sidebar width is set in percent; usually, "primary" stands for the actual page content area and "secondary" stands for sidebar)

CSS code

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

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

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

We have more flexibility with the block width now.

Boxed website with sidebar

Description

This is quite tricky website layout for full-width alignment. But could be achieved with some calculations.

Again, our full-width alignment wrapper (the .align-wrap) helps us quite a bit and provides us with more flexibility.

Fullwidth Cover Image
with fixed background

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: 900px
there is no sidebar layout below this breakpoint
.62
in website layout with sidebar this is calculated as 100 / Primary_Content_Width_% (if your content and sidebar width is set in percent; usually, "primary" stands for the actual page content area and "secondary" stands for sidebar)
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);
	}
}

@media screen and (min-width: 900px) {
	.alignfull {
		position: relative;
		width: auto;
		left: 2rem;
		margin-left: calc(50% / .62 - 50vw);
		margin-right: 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 {
		left: 0;
		margin-left: calc(50% / .62 - 1280px / 2);
		margin-right: 0;
	}
}

Wou, OK, seems to do the trick…

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.

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

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: 900px
there is no sidebar layout below this breakpoint
.62
in website layout with sidebar this is calculated as 100 / Primary_Content_Width_% (if your content and sidebar width is set in percent; usually, "primary" stands for the actual page content area and "secondary" stands for sidebar)
1280px
boxed website container max width
800px
content area 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;
	}
}

@media screen and (min-width: 900px) {
	.align-wrap {
		width: auto;
		padding-right: 0;
		margin-left: calc(50% / .62 - 50vw);
	}
}

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

@media screen and (min-width: 900px) {
	.align-wrap .alignfull {
		max-width: calc(1280px / 2 + 800px * .62 - 800px / 2);
	}
}

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: -1.

Much more manageable this one if you ask me ;)

Max-width on blocks: Website with sidebar

Description

With max-width applied on content blocks themselves, the code 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.