Why do Olivero webpages have empty space and how to remove this empty space?

The olivero design keeps content left-aligned in LTR languages, and right-aligned in RTL languages. Attaching the issue working on centering the layout.

Andy I am sorry but I don't understand what aligning has to do with this empty space in each webpage.
If the space is removed, anything could still be alinged to anywhere by CSS.

The page content is in a wrapper with a set max width. The “drops” pattern is the background that takes up the remainder of the page instead of blank white.

Hello Andy, by "content" I assume you meant the "Content region" and that this region is inside a wrapper, is that correct?

What I misunderstand is why is it good to not to cover the horizontal viewport entirely?...

I also seek a way to remove the empty space and to make my website's content to cover all of the horiztonal viewport --- how is it this possible CSSwise?

Hello @bendqh1
These web pages have empty space issues because of the below CSS.

.page-wrapper {
max-width: var(--max-bg-color);
background: var(--color--white);
}

max-width: var(--max-bg-color); is creating the empty space.
If we make 100% then it will be fixed.

I've been asking myself the same question and this issue does not answer it yet.

The technical reason - max-width: something - is one way to answer the 'why' question.

However, my thirst for comprehension of the purpose for this design decision remains unsatisfied.

What's the benefit of restricting the width to 87xy rem?
Does it f.e. improve the websites readability?
Or the space is reserved for some hovering widget like a chat bubble!?

TomSaw, I agree, and also, the provided CSS above didn't fully solve the problem for me.

.page-wrapper {
	max-width: 100%;
	background: 100%;
}

body {
	background-image: none;
	background-position: unset;
}

It's not enough that yes everything spans on 100% width and also the drops background image disappears but still, all content is marginalized to the leftmost of the screen (LTR languages) or to the rightmost of the screen (RTL languages).

Any suggestions how to solve this problem?

Page content is limited in width for readability.
https://css-tricks.com/six-tips-for-better-web-typography/

Page layout is limited in width to keep the rest of the page elements in the same general area with the page content.

If you think this layout would look better center aligned, I'd direct you to a different issue, 📌 Olivero: Center align content (instead of left align) Needs work .

andy-blum, either I miss something, you miss something or we both miss something.

In both your screenshots, an empty "column" with the body tag background images of Gray-colored drops.

I still ask with this empty column is there?

The empty column is there because the website layout has been deliberately limited to a max-width of 98.125rem. Without this limitation, the website would spread across the entire screen hindering readability of the content and causing large swaths of empty space between the content, the logo, and the navigation.

If this is not acceptable to you, you are free to make a new theme using Olivero as a starterkit 📌 [PP-1] Allow starterkit theme generator tool to clone Olivero Postponed . This design of Olivero has been finalized for quite some time now and it will not be changing. Please stop re-opening this issue.

I am allowed to re open this issue if I think that there is a misunderstanding, a misleading or a UX problem which has not been discussed enough.

I think you should allow this issue at least half a week, if not a week or a month to be widely addressed by the community.

I understand that with some different CSS than yours above, we can actually solve the problem without forking Olivero.
I have switched the right to left and vice versa for LTR testing instead of RTL testing.

/* delete drops image */
body {
	background-image: none; 
	background-position: unset;
}

/* maximize page width */
.page-wrapper {
	max-width: 100%; 
}

/* Centralize single column content */
#main .grid-full {
	grid-template-columns: none;
}

/* stretch and centralize main content */
#main > div.main-content > div {
	max-width: 100% !important;
	margin: 0 auto 0 !important;
}

/* stretch and centralize footer content */
#page > footer > div {
	max-width: 100% !important;
	margin: 0 auto 0 !important;
}

/* if your site is in a LTR language like English, make it margin-left instead */
.site-branding__inner {
	margin-left: 32.5px;
}

@media screen and (min-width: 480px) {

	/* fix discrapencies between the starting place of elements */
	.region {
		justify-content: start;
	}

	/* fix asymmetry in desktop views from the left and right (switch to padding-right for LTR websites) */
	.main-content__container, .container {
		padding-inline: unset; 
		padding-right: 5%;
	}

	/* prevent images from overflowing in standard layout builder columns */
	.layout--twocol-section img, .layout--threecol-section img, .layout--fourcol-section img {
		max-width: 350px;
	}
}

Please review above CSS.

As noted the spacing was added on purpose and I highly doubt that's going to change at this point with the ability to clone the theme yourself for your custom needs.

Moving out of review as there is nothing to actually review.

Oh, I meant that I suggest other users to review the CSS I pasted above, is it out of scope here? What then is normally reviewed here?

Typically code changes should be submitted as patches or MRs - that way the testing infrastructure can review the code as well. Your CSS, however, is not a bug fix. Your CSS is a change based on your opinion of a design that was finalized several years ago, and that is in active use in sites. Changing this design in Olivero now would cause regressions in existing sites. As such, I have continually marked this as "works as designed".

Again, if this change is something you feel that strongly about, I recommend using the starterkit patch provided above or some other method for creating your own custom solution.

Hey there, coming in as a member of the Community Health team, there seems to be some disagreement about where this issue fits in the ecosystem.

I take MRs as "Merge Requests".

Alright, either a patch or an MR.

Thanks.

Yepp MR = [M]erge [R]equest and I also understand, that this is concidered a Feature and Olivero is feature complete and does not accept any changes. It's a good thing if things have some stability.

One thing to concider: I've created a olivero based theme ui_suite_olivero → this year. Thanks to modules from UI Suite Initiave → you can set all css variables of olivero easily in backend and they are stored in configurations which is sooper maintainable!

-> I also don't relly on oliveros limited width so I thought there could be a select or checkbox widget in the ui_suite_olivero settings to control the width behaviour!