[Responsive] Forzare riduzione size titolo

[Tom1884]

Sto sviluppando un sito su Wordpress qui.

Il titolo (lungo 3 parole, purtroppo), nell'header alla destra del logo, ha comportamenti diversi con browser mobile diversi.
Riducendo via via le dimensioni di visualizzazione, prima "trancia" la terza ed ultima parola, poi riduce un po' il carattere delle due rimanenti, infine toglie via del tutto il titolo!

Come posso uniformare la cosa, possibilmente facendo in modo che il titolo non venga mai tranciato, ma casomai sempre e solo ridotto di dimensioni?

[KillerWorm]

Puoi provare a fare qualche modifica ma, ad ogni modo, essendo un layout responsive ci sono molte variabili in gioco, per cui i risultati potrebbero essere imprevedibili se la cosa non è studiata in modo adeguatamente dettagliato.

Prova intanto a sostituire questo (riga 2747 del file foundation.css):

        width: 75%;

con questo:

        width: 100%;

Quella regola indica la larghezza dell'elemento <a> che costituisce il titolo.
Mettendola al 100% dovrebbe evitare che le parole siano troncate.

Tieni presente che, nel css, quella riga fa riferimento ad altri elementi su cui è applicata quella stessa regola. Quindi, ripeto, potresti avere dei comportamenti imprevedibili se non si conosce esattamente l'intero contesto.
In alternativa potresti definire un selettore specifico o applicare il css in-linea in modo da non influire sugli altri elementi non interessati.

Ad ogni modo, con una dimensione ridotta, il titolo va a sovrapporsi al menu destro perché la grandezza del carattere è impostata per ridursi fino ad una certa dimensione della pagina. In questo caso puoi aggiungere una nuova regola per ridurre ulteriormente la dimensione del carattere, superata una certa soglia di larghezza della pagina. Oppure, superata quella soglia, potresti far disporre su tre righe il titolo stesso, così da mantenere comunque una certa dimensione del carattere e non perdere troppo di leggibilità. Vedi tu che fare.

[Tom1884]

Ti ringrazio. Prima della tua risposta, ho impedito l'"a capo" con:

.site-title a {
   white-space: nowrap;
}

Pare faccia il suo dovere, che ne pensi?

Ora, come scrivi tu, il problema principale è che negli schermi molto piccoli, la riga intera non ci sta.
Come potrei fare questo che dici?

superata quella soglia, potresti far disporre su tre righe il titolo stesso, così da mantenere comunque una certa dimensione del carattere e non perdere troppo di leggibilità.

Grazie ancora!

[KillerWorm]

white-space: nowrap;

Sì, visivamente l'effetto è lo stesso, lo avevo considerato anche io in un primo momento ma la dimensione dell'elemento <a> restava comunque più piccola del testo che effettivamente conteneva. Ora, non ho idea di quali conseguenze potrebbe generare ma, dato che si tratta di un link (per cui un'area sensibile agli eventi del mouse) mi è sembrato più corretto "adeguarne" la dimensione piuttosto che permettere l'overflow impedendone giusto il ritorno a capo. Poi vedi tu

Come potrei fare questo che dici?

Supponendo che al di sotto dei 400px si debba disporre su più righe, prova ad aggiungere una roba del genere:

@media screen and (max-width: 400px) {
  .site-title a {
    width: 110px;
    line-height: 1em;
    white-space: normal;
  }
}

Se serve metti qualche !important, oppure sistema questa parte opportunamente dopo le altre regole.

[Tom1884]

Credo stiamo migliorando, ora si distribuisce su più righe. Il problema adesso è che il titolo va a capo rispetto al logo: il titolo del sito scompare e compare sotto il logo solo cliccando "menu".

[KillerWorm]

Hai provato ad aggiungere qualche !important?

@media screen and (max-width: 400px) {
  .site-title a {
    width: 110px !important;
    line-height: 1em;
    white-space: normal;
  }
}