Is there any way to make the banner links in the mobile version appear horizontally instead of vertically? Thanks! [Captura de pantalla 2022-03-30 a las 9.42.30]

Here’s an example code of how you can customize the banner to look less tall on small screens: :warning: Put this in the mobile tab of your theme customization! // Makes the welcome banner adapted to small screen sizes .below-site-header-outlet.welcome-link-banner-connector { .welcome-link-banner-wrapper { background-image: url($mobile-banner-bg); background-size: cover; .welcome-wrapper { .featured-banner-link { flex-direction: row; padding-bottom: 0.5em; &>div a { padding: 0 5px; h3 { font-size: 0.75em; white-space: normal; } } } } } } To be tweaked regarding your needs (that’s why there are “empty” SCSS nests). As it is, it looks like this on my current project: [image] edit: @Moin was faster than me to mention my own tweaks… Bravo :clap: :smile:

[image] Third migration, once again for a niche forum (Volkswagen Campers vans) Praise Ooooh yes, absolutely! There is something “soothing” in this color scheme! Yes, I intend to share the feedback. After this future experience on vw-camper.fr, I also intend to extend it to uniyclist.com, where a chat feature has never been explicitly asked or wanted. Because of this, the experiment may be interesting: how the users will react? Positively or negatively? But since it’s kind of a two-step experience of several months each, It’s not for tomorrow… slight_smile Sure. Be aware i…

Thank you very much, for some reason I didn’t notice it. It works perfectly!

[image] Third migration, once again for a niche forum (Volkswagen Campers vans) Praise I tweaked the code a tiny bit so there shouldn’t be any horizontal wrap on small screen by adding white-space: normal; on h3. Also, you can remove margin: 0 auto 0 !important; if you wish to keep a background image. It can look good. Example: [image]

[image] Coin-coin le Canapin: Here’s an example code of how you can customize the banner to look less tall on small screens: :warning: Put this in the mobile tab of your theme customization! This is a vast improvement in the mobile appearance of the Welcome Banner. Just yesterday I watched a new user sign up to my site via mobile, and they tripped up on the large size of the banner; basically they didn’t realise that they had to scroll down to see the action. Hence I’ve been hunting for something better, and that snippet of CSS is brilliant. I had to trim out background-image: url($mobile-banner-bg); as it is clear you lifted that from a forked TC. @awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

Nathan Kershaw: @awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component? sure PRs are always welcome

[image] Coin-coin le Canapin: Here’s an example code of how you can customize the banner to look less tall on small screens: :warning: Put this in the mobile tab of your theme customization! [image]Welcome Link Banner [image] nathank: @awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component? sure PRs are always welcome Hi @awesomerobot, given that I haven’t seen a PR for that so far, I just created a PR to add the enhancement made by @Canapin, and added two locales. :wink:

I took a look and saw that you removed the Locale changes as requested by @team. However, the PR was closed so I opened a new one for you: https://github.com/discourse/discourse-welcome-link-banner/pull/6

Awesome! When do you think it will get merged?

I’m not sure - @awesomerobot, is my PR okay?

Looks good to me, merged now. Thanks!

Making the banner links horizontal in mobile version

Development

Moin March 30, 2022, 8:10am 2

Topic		Replies	Views
Welcome Banner shows on desktop but not on mobile Product Support	3	191	August 3, 2026
How to put the welcome text above the icons? Product Support welcome-link-banner	1	405	July 5, 2023
Banner too wide on the full width themes Product Support welcome-link-banner	2	393	September 14, 2023
Versatile Banner Theme component official , versatile-banner	106	49618	July 22, 2026
Site banner title wrapping too aggressively on mobile UX	3	792	June 28, 2018

Making the banner links horizontal in mobile version

Related topics