Thanks for looking into this. Some more context:

We have had several requests such as this one in August. As you can see on the screenshot, the gray box was cut off at the lower end (I was able to verify this on several of my own devices as well). Problem was that the gray overlay was using "position:absolute" within the top box that used "position:relative"; in that case, child elements do not define the height of parent elements any more and the observed behavior was to be expected. It just seems that nobody has considered small/mobile devices when designing the main page years ago.

I have meanwhile changed the top box to using the much more modern css grid technique in order to fix the broken display. The background image, however, does not really scale well as it is not high enough.

An additional problem is that the current background image has a CC-by-sa license, so we need to link to the file page at Commons in order to properly re-use it. The new image should have be in public domain or CC0 or so that does not require any attribution (and thus no link).

Hello there! It looks like getting a new image will take a bit longer than expected. For that reason, I'd like to suggest trying to solve the technical issues that are preventing the current image from adjusting to different screen sizes. While at it, we could also apply some changes to the text box in the header to improve the appearance of wikidata.org's hero:

Mocks

Find current specs in this Figma file.

Vector (Desktop)	Minerva (Mobile)

Thank you for the advice. I have tried to implement as much as my capabilities allow; I am not a frontend dev, thus please verify :-)

What's missing:

• The background image ("hero") seems to scale okay-ish on desktop now, but there is some CSS definition in the mobile skin (as much as I am aware) which makes it scale down in a poor way on mobile. Not sure how to fix this, to be honest.
• The "want to help translate?" stuff is now inside the overlay; changing the text is not that simple, since it is defined in a translatable template and all translations would need to be updated as well. Let's leave it as is for now.
• The light gray background is now #f8f9fae6 as suggested, but is looks pretty pale on my display. I personally would make it a bit darker.
• The 16px margin on desktop are defined in .mw-body-content as much as I am aware. Since this looks like a skin definition, I have left it as is on both desktop and mobile.

Btw. I am not aware of any design guidelines. Is such a document available somewhere?

Thanks @MisterSynergy for the amazingly fast changes! 😄

What's missing:

• The background image ("hero") seems to scale okay-ish on desktop now, but there is some CSS definition in the mobile skin (as much as I am aware) which makes it scale down in a poor way on mobile. Not sure how to fix this, to be honest.

I'm not sure what the proper fix would be either, but strangely enough, just disabling the auto height applied to the image (which I guess is enforcing the original size and keeping the aspect ratio) seems to do the trick? I'm not sure if the level of specificity here might be problematic, but I don't see any other images affected by this change.

• The "want to help translate?" stuff is now inside the overlay; changing the text is not that simple, since it is defined in a translatable template and all translations would need to be updated as well. Let's leave it as is for now.

Thanks again so much for this. Makes complete sense to leave as is.

• The light gray background is now #f8f9fae6 as suggested, but is looks pretty pale on my display. I personally would make it a bit darker.

It's of course quite light in comparison to the previous version. Do you think the legibility of the content is compromised? (e.g. poor contrast, overlapping with image elements on the background). I like how we're now using the same color applied to the main navigation menu (just with some opacity to avoid disrupting the image): makes the page look quite balanced. But this is, of course, quite subjective.

• The 16px margin on desktop are defined in .mw-body-content as much as I am aware. Since this looks like a skin definition, I have left it as is on both desktop and mobile.

If we fix the height of the image on mobile, this might stop being an issue. The main problem at the moment is that the headerbox "touches" the page header. There should be some spacing between the elements.

Applying a rough margin bottom to the banner-container div in Minerva creates the right spacing:

Btw. I am not aware of any design guidelines. Is such a document available somewhere?

VERY long story short: The Wikimedia design system (Codex) – to some degree based on the Wikimedia Design Style Guide – is in the making by MWF (I'm a contributor to their team). All new styles (encoded as design tokens) are available on the Codex Demo site. The missing font styles will be published soon and are for now documented in Figma.

In T321571#8419697, @Sarai-WMDE wrote:

• The background image ("hero") seems to scale okay-ish on desktop now, but there is some CSS definition in the mobile skin (as much as I am aware) which makes it scale down in a poor way on mobile. Not sure how to fix this, to be honest.

If not sure what the proper fix would be either, but strangely enough, just disabling the auto height applied to the image (which I guess is enforcing the original size and keeping the aspect ratio) seems to do the trick? I'm not sure if the level of specificity here might be problematic, but I don't see any other images affected by this change.

Yeah, I got this far as well, but I do not know how I can overwrite this behavior. I can add a height attribute to the image in question, but I cannot figure out which value it has to have. The problematic definition .content a > img { height: auto !important; } seems to come from the Minerva skin which I cannot modify.

• The light gray background is now #f8f9fae6 as suggested, but is looks pretty pale on my display. I personally would make it a bit darker.

It's of course quite light in comparison to the previous version. Do you think the legibility of the content is compromised? (e.g. poor contrast, overlapping with image elements on the background). I like how we're now using the same color applied to the main navigation menu (just with some opacity to avoid disrupting the image): makes the page look quite balanced. But this is, of course, quite subjective.

Legibility is fine, it's just … a very pale and partially transparent (as intended) tone. The contrast to the background is barely there, but it shouldn't really contrast the background anyways. Not sure how it looks on cheap or poorly calibrated displays.

Anyways, perhaps it's simply the unfamiliar look which bothers me. This was really not meant to be a real issue for debate here :-)

• The 16px margin on desktop are defined in .mw-body-content as much as I am aware. Since this looks like a skin definition, I have left it as is on both desktop and mobile.

If we fix the height of the image on mobile, this might stop being an issue. The main problem at the moment is that the headerbox "touches" the page header. There should be some spacing between the elements.

Applying a rough margin bottom to the banner-container div in Minerva creates the right spacing:

Okay I begin to really understand the problem. I always used the mobile main page while being logged in, with the very unpopular "Welcome, username!" message between the search bar and the hero image. Then there is indeed no problem.

However, when browsing the main page while not logged in, it does look wrong indeed. I have thus added a 16px top margin to the main page hero image container for logged-out users of the Minerva skin only.

Btw. I am not aware of any design guidelines. Is such a document available somewhere?

VERY long story short: The Wikimedia design system (Codex) – to some degree based on the Wikimedia Design Style Guide – is in the making by MWF (I'm a contributor to their team). All new styles (encoded as design tokens) are available on the Codex Demo site. The missing font styles will be published soon and are for now documented in Figma.

Thanks, interesting. Will keep an eye on it!

I'm not sure what the proper fix would be either, but strangely enough, just disabling the auto height applied to the image (which I guess is enforcing the original size and keeping the aspect ratio) seems to do the trick? I'm not sure if the level of specificity here might be problematic, but I don't see any other images affected by this change.

Yeah, I got this far as well, but I do not know how I can overwrite this behavior. I can add a height attribute to the image in question, but I cannot figure out which value it has to have. The problematic definition .content a > img { height: auto !important; } seems to come from the Minerva skin which I cannot modify.

So strange that simply 100% doesn't work. I found that the image's height improves a bit using the values inherit or -webkit-fill-available (the vendor prefix seems to be a must for Chrome). The same result is obtained adding min-height:100% to the existing CSS. They all seem good enough solutions.

It's of course quite light in comparison to the previous version. Do you think the legibility of the content is compromised? (e.g. poor contrast, overlapping with image elements on the background). I like how we're now using the same color applied to the main navigation menu (just with some opacity to avoid disrupting the image): makes the page look quite balanced. But this is, of course, quite subjective.

Legibility is fine, it's just … a very pale and partially transparent (as intended) tone. The contrast to the background is barely there, but it shouldn't really contrast the background anyways. Not sure how it looks on cheap or poorly calibrated displays.

That last point concerns me too. I'll figure out how to validate this.

Applying a rough margin bottom to the banner-container div in Minerva creates the right spacing:

Okay I begin to really understand the problem. I always used the mobile main page while being logged in, with the very unpopular "Welcome, username!" message between the search bar and the hero image. Then there is indeed no problem.

However, when browsing the main page while not logged in, it does look wrong indeed. I have thus added a 16px top margin to the main page hero image container for logged-out users of the Minerva skin only.

Thanks again very much for the fix!