New /about banner cut off on mobile

Contribute UX

AI-generated summary

Users reported that the new /about page banner is cut off on mobile devices, particularly on iPhone 13 Pro and Android A14 using Chrome. HamMan2118 first flagged the issue, noting it may be intentional but worth reporting. NateDhaliwal confirmed the issue on Android, suggesting the banner image doesn’t wrap responsively. Heliosurge explained the banner is currently desktop-optimized and shared a CSS workaround for mobile: adjusting width, max-width, margin, and padding. A GitHub PR (Osama) was referenced as a fix, and while NateDhaliwal noted it was “mostly fixed,” Osama confirmed it looked fine on iPhone 15 Pro. After further testing, Osama shared a commit that fully resolved the issue for NateDhaliwal. Finally, NateDhaliwal raised a follow-up question: whether the banner text should be centered on mobile for better alignment. The issue was ultimately addressed via code changes, though design refinement (like text centering) remains open for discussion.

1

Good morning!

I have noticed on the /about page on mobile (iPhone 13 Pro, Google Chrome, but this shouldn’t make a difference)

image
image421×911 52.7 KB

This may be by design and is unfixable, however, just putting something here :slight_smile:

3 Likes
2

Can reproduce on Android A14, Chrome.
I think the reason is that that is an image, and won’t be able to wrap. Likely not intended.

3 Likes
5

The new about banner ATM is more configured for Desktop.

Add this to your mobile CSS in a custom TC.

.about__banner {
  width: calc(120%);
  max-width: 392px;
  margin-left: -0.50em;
  padding-bottom: 0.5em;
}

In the image, there's a promotional advertisement for a service named "Xtropolis.one," which seems to be related to virtual reality technology. The ad displays an array of vibrant neon lights and futuristic elements, suggesting a cutting-edge tech theme. (Captioned by AI)
In the image, there's a promotional advertisement for a service named "Xtropolis.one," which seems to be related to virtual reality technology. The ad displays an array of vibrant neon lights and futuristic elements, suggesting a cutting-edge tech theme. (Captioned by AI)864×1614 84.1 KB

Topic on new about page here

2 Likes
6

This should fix the problem:

https://github.com/discourse/discourse/pull/28692

We may add support for uploading a different image with different dimensions for mobile, but for now the PR above should improve the situation a lot on mobile.

3 Likes
7

Hmm… it is mostly fixed, but not fully.

This image appears to be a screenshot from a mobile device displaying a website with a black background and white text. (Captioned by AI)
This image appears to be a screenshot from a mobile device displaying a website with a black background and white text. (Captioned by AI)1080×2408 189 KB

8

Hmmm it looks ok on my phone (iPhone 15 Pro):

The image shows a computer screen with a Discourse Meta application open, displaying a message about the online home for the Discourse community. (Captioned by AI)
The image shows a computer screen with a Discourse Meta application open, displaying a message about the online home for the Discourse community. (Captioned by AI)1179×2556 221 KB

What is your device and browser?

9

Yeah, looks good for me on iPhone 13 Pro/Chrome

image
image1170×2532 297 KB

10

Android A14, Chrome.

1 Like
11

@NateDhaliwal the issue you were seeing should now be fixed:

https://github.com/discourse/discourse/commit/c76ff5c994e0d5af04c13cf91fb267f312dce208

3 Likes
12

Nice! I was wondering, should the text in the image be centered if on mobile?

1 Like