# Die Banner-Links in der mobilen Version horizontal machen
**URL:** https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589
**Category:** Development
**Tags:** welcome-link-banner
**Created:** [30. März 2022 um 07:47 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589 "2022-03-30T07:47:04Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@undasein](https://meta.discourse.org/u/undasein)
#### Post date: [30. März 2022 um 07:47 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/1 "2022-03-30T07:47:04Z")
Gibt es eine Möglichkeit, die Bannerlinks in der mobilen Version horizontal statt vertikal erscheinen zu lassen? Danke!
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [30. März 2022 um 08:10 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/2 "2022-03-30T08:10:08Z")
> [@Third migration, once again for a niche forum (Volkswagen Campers vans)](https://meta.discourse.org/t/third-migration-once-again-for-a-niche-forum-volkswagen-campers-vans/220224/6?u=moin):
>
> 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](http://vw-camper.fr), I also intend to extend it to [uniyclist.com](http://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…
---
### Author:  [@undasein](https://meta.discourse.org/u/undasein)
#### Post date: [30. März 2022 um 08:20 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/3 "2022-03-30T08:20:32Z")
Vielen Dank, aus irgendeinem Grund habe ich es nicht bemerkt. Es funktioniert perfekt!
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2. Mai 2022 um 21:24 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/4 "2022-05-02T21:24:50Z")
> [@Third migration, once again for a niche forum (Volkswagen Campers vans)](https://meta.discourse.org/t/third-migration-once-again-for-a-niche-forum-volkswagen-campers-vans/220224/10?u=moin):
>
> 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:
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2. Mai 2022 um 21:27 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/5 "2022-05-02T21:27:43Z")
Hier ist ein Beispielcode, wie Sie das Banner so anpassen können, dass es auf kleinen Bildschirmen weniger hoch ist:
⚠ Fügen Sie dies im **mobile** -Tab Ihrer Theme-Anpassung ein!
```scss
// Macht das Willkommensbanner an kleine Bildschirmgrößen angepasst
.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;
}
}
}
}
}
}
```
Dies kann nach Ihren Bedürfnissen angepasst werden (deshalb gibt es “leere” SCSS-Nester).
So sieht es in meinem aktuellen Projekt aus:
* * *
Bearbeiten: @Moin war schneller als ich, um meine eigenen Anpassungen zu erwähnen… Bravo 👏 😄
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [24. Juni 2022 um 11:21 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/8 "2022-06-24T11:21:32Z")
> [@Canapin](#):
>
> Hier ist ein Beispielcode, wie Sie das Banner so anpassen können, dass es auf kleinen Bildschirmen weniger hoch ist:
> ⚠ Fügen Sie dies in den **mobile** -Tab Ihrer Theme-Anpassung ein!
Dies ist eine enorme Verbesserung des mobilen Erscheinungsbilds des Willkommensbannern. Erst gestern habe ich beobachtet, wie sich ein neuer Benutzer über sein Mobiltelefon auf meiner Website angemeldet hat, und er ist über die große Größe des Banners gestolpert; im Grunde hat er nicht bemerkt, dass er nach unten scrollen musste, um die Aktion zu sehen. Daher habe ich nach etwas Besserem gesucht, und dieser CSS-Schnipsel ist brillant.
Ich musste `background-image: url($mobile-banner-bg);` herausnehmen, da es klar ist, dass Sie das aus einem geforkten TC übernommen haben.
@awesomerobot, würden Sie einen PR in Betracht ziehen, um diese mobile Verbesserung zur Theme-Komponente hinzuzufügen?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [24. Juni 2022 um 13:09 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/9 "2022-06-24T13:09:16Z")
> [@nathankershaw](#):
>
> @awesomerobot, würdest du einen PR in Betracht ziehen, um diese mobile Verbesserung zur Theme-Komponente hinzuzufügen?
sicher, PRs sind immer willkommen
---
### Author:  [@Kuro22](https://meta.discourse.org/u/Kuro22)
#### Post date: [15. August 2022 um 14:28 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/10 "2022-08-15T14:28:55Z")
> [@Canapin](#):
>
> Hier ist ein Beispielcode, wie Sie das Banner anpassen können, damit es auf kleinen Bildschirmen weniger hoch aussieht:
> ⚠ Fügen Sie dies in den **mobile** Tab Ihrer Theme-Anpassung ein!
> [@awesomerobot](#):
>
> > [@nathank](#):
> >
> > @awesomerobot, würden Sie einen PR in Betracht ziehen, um diese mobile Verbesserung zur Theme-Komponente hinzuzufügen?
>
> sicher, PRs sind immer willkommen
Hallo @awesomerobot, da ich bisher keinen PR dafür gesehen habe, habe ich gerade einen PR erstellt, um die von @Canapin vorgenommene Verbesserung hinzuzufügen, und zwei Lokalisierungen hinzugefügt. 😉
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [19. August 2022 um 04:14 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/11 "2022-08-19T04:14:50Z")
Ich habe nachgesehen und gesehen, dass Sie die Locale-Änderungen wie von [@team](https://meta.discourse.org/groups/team) gewünscht entfernt haben. Da der PR jedoch geschlossen wurde, habe ich einen neuen für Sie geöffnet:
>
>
> These are the style changes suggested by Kuro282 in https://meta.discourse.org/t…/welcome-link-banner/218743/41.
>
> @kuro282 removed the locale changes as requested in https://github.com/discourse/discourse-welcome-link-banner/pull/5#issuecomment-1216643843, but I think it needs a fresh PR (hence this one)
---
### Author:  [@AquaL1te](https://meta.discourse.org/u/AquaL1te)
#### Post date: [25. September 2022 um 08:15 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/12 "2022-09-25T08:15:48Z")
Super! Wann denkst du, wird es zusammengeführt?
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [25. September 2022 um 09:05 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/13 "2022-09-25T09:05:44Z")
Ich bin mir nicht sicher – @awesomerobot, ist mein PR in Ordnung?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [26. September 2022 um 15:06 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/14 "2022-09-26T15:06:29Z")
Sieht gut aus, jetzt zusammengeführt. Danke!
---
### Author:  [@Andy\_Clifton](https://meta.discourse.org/u/Andy_Clifton)
#### Post date: [23. Januar 2023 um 08:54 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/17 "2023-01-23T08:54:42Z")
Schön! Aber das Problem mit vertikalen Symbolen tritt auch auf Tablets auf, sodass die Verwendung von mobilem benutzerdefiniertem CSS bei zu geringer Bildschirmgröße beginnt. Leider erlaubt Discourse benutzerdefiniertes CSS nicht, Tablets anzusprechen. Meine Lösung war, den folgenden Text in den _gemeinsamen_ benutzerdefinierten CSS-Tab einzufügen.
Es enthält auch Korrekturen für unerwünschte Abstände auf der rechten Seite in der Tablet-Ansicht, und ich habe auch die Schriftgröße für die Links auf 1em erhöht.
```css
@media (max-width: 768px) {
.below-site-header-outlet.welcome-link-banner-connector {
.welcome-link-banner-wrapper {
background-size: cover;
.welcome-wrapper {
.welcome-content {
p {
max-width: initial;
}
}
.featured-banner-link {
flex-direction: row;
padding-bottom: 0.5em;
div a {
padding: 0 5px;
h3 {
font-size: 1em;
white-space: normal;
}
}
}
}
}
}
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [23. Januar 2023 um 12:57 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/18 "2023-01-23T12:57:58Z")
Danke für diese Info!
Ich habe keinen Pull Request für die Theme-Komponente mit meiner mobilen Version gemacht, da ich sie nicht in verschiedenen Konfigurationen getestet habe. Und Ihre Nachricht zeigt, dass der mobile Code tatsächlich zusätzliche Arbeit erfordern würde 🙂
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [8. Juni 2024 um 12:36 UTC](https://meta.discourse.org/t/making-the-banner-links-horizontal-in-mobile-version/270589/19 "2024-06-08T12:36:45Z")
Dieses Thema wurde nach 801 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr möglich.