Rendere i link del banner orizzontali nella versione mobile

[undasein (Andres Garrido)]

C’è un modo per far apparire i link del banner nella versione mobile in orizzontale invece che in verticale? Grazie!

[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)]

Grazie mille, per qualche motivo non me ne ero accorto. Funziona perfettamente!

[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)]

Ecco un esempio di codice su come personalizzare il banner per renderlo meno alto sugli schermi piccoli:
Inserisci questo nella scheda mobile della personalizzazione del tuo tema!

// Rende il banner di benvenuto adattabile alle dimensioni degli schermi piccoli
.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;
                    }
                }
            }
        }
    }
}

Da modificare in base alle tue esigenze (ecco perché ci sono annidamenti SCSS “vuoti”).

Così com’è, sul mio progetto attuale appare così:

---

modifica: @Moin è stato più veloce di me a menzionare le mie modifiche… Bravo

[nathank (Nathan Kershaw)]

@Canapin

Ecco un esempio di codice su come puoi personalizzare il banner per renderlo meno alto sui piccoli schermi:
Inserisci questo nella scheda mobile della personalizzazione del tuo tema!

Questo è un enorme miglioramento nell’aspetto mobile del Welcome Banner. Proprio ieri ho visto un nuovo utente registrarsi al mio sito tramite cellulare, e si è inciampato nelle grandi dimensioni del banner; in pratica non si era reso conto che doveva scorrere verso il basso per vedere l’azione. Pertanto, ho cercato qualcosa di meglio, e quello snippet di CSS è brillante.

Ho dovuto rimuovere background-image: url($mobile-banner-bg); poiché è chiaro che l’hai preso da un TC forkato.

@awesomerobot, prenderesti in considerazione una PR per aggiungere questo miglioramento mobile al Componente Tema?

[awesomerobot (Kris)]

@nathankershaw

@awesomerobot, prenderesti in considerazione una PR per aggiungere questo miglioramento mobile al componente del tema?

Certo, le PR sono sempre benvenute

[Kuro22]

@Canapin

Ecco un esempio di codice su come personalizzare il banner per renderlo meno alto sui piccoli schermi:
Inserisci questo nella scheda mobile della personalizzazione del tuo tema!

@awesomerobot

@nathank

@awesomerobot, prenderesti in considerazione un PR per aggiungere questo miglioramento mobile al componente del tema?

certamente, i PR sono sempre benvenuti

Ciao @awesomerobot, dato che finora non ho visto un PR a riguardo, ho appena creato un PR per aggiungere il miglioramento apportato da @Canapin e ho aggiunto due localizzazioni.

[nathank (Nathan Kershaw)]

Ho dato un’occhiata e ho visto che hai rimosso le modifiche alla locale come richiesto da @team. Tuttavia, la PR è stata chiusa, quindi ne ho aperta una nuova per te:

Adapt the banner to mobile screens

[AquaL1te]

Fantastico! Quando pensi che verrà unito?

[nathank (Nathan Kershaw)]

Non sono sicuro: @awesomerobot, il mio PR va bene?

[awesomerobot (Kris)]

Sembra buono per me, unito ora. Grazie!

[Andy_Clifton]

Bello! Ma il problema delle icone verticali si verifica anche sui tablet, quindi l’uso del CSS personalizzato mobile inizia da una dimensione dello schermo troppo bassa. Sfortunatamente, il CSS personalizzato di Discourse non consente di selezionare i tablet. La mia soluzione è stata inserire il seguente testo nella scheda CSS personalizzato comune.

Include anche correzioni per spazi indesiderati a destra nella visualizzazione tablet, e ho anche scelto di aumentare la dimensione del carattere per i link a 1em.

@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)]

Grazie per queste informazioni!
Non ho inviato una pull request al componente del tema con la mia versione mobile perché non l’ho testata in varie configurazioni. E il tuo messaggio mostra che il codice mobile avrebbe effettivamente bisogno di ulteriore lavoro