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):
con questo:codice:width: 75%;
Quella regola indica la larghezza dell'elemento <a> che costituisce il titolo.codice:width: 100%;
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.
Rispondi quotando
