Die Banner-Links in der mobilen Version horizontal machen

[undasein (Andres Garrido)]

Gibt es eine Möglichkeit, die Bannerlinks in der mobilen Version horizontal statt vertikal erscheinen zu lassen? Danke!

[Moin]

Third migration, once again for a niche forum (Volkswagen Campers vans)

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… Sure. Be aware i…

[undasein (Andres Garrido)]

Vielen Dank, aus irgendeinem Grund habe ich es nicht bemerkt. Es funktioniert perfekt!

[Moin]

Third migration, once again for a niche forum (Volkswagen Campers vans)

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]

[Canapin (Coin-coin le 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 im mobile-Tab Ihrer Theme-Anpassung ein!

// 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

[nathank (Nathan Kershaw)]

@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?

[awesomerobot (Kris)]

@nathankershaw

@awesomerobot, würdest du einen PR in Betracht ziehen, um diese mobile Verbesserung zur Theme-Komponente hinzuzufügen?

sicher, PRs sind immer willkommen

[Kuro22]

@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.

[nathank (Nathan Kershaw)]

Ich habe nachgesehen und gesehen, dass Sie die Locale-Änderungen wie von @team gewünscht entfernt haben. Da der PR jedoch geschlossen wurde, habe ich einen neuen für Sie geöffnet:

Adapt the banner to mobile screens

[AquaL1te]

Super! Wann denkst du, wird es zusammengeführt?

[nathank (Nathan Kershaw)]

Ich bin mir nicht sicher – @awesomerobot, ist mein PR in Ordnung?

[awesomerobot (Kris)]

Sieht gut aus, jetzt zusammengeführt. Danke!

[Andy_Clifton]

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.

@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;
                        }
                    }
                }
            }
        }
    }
}

[Canapin (Coin-coin le Canapin)]

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