Titolo (oggetto Testo) che si taglia ai lati nella vista responsive smartphone 
Autor: Giuliano A.Salve a tutti,
ho un oggetto Testo che fa da titolo principale in un hero a tutta larghezza. Il testo è impostato a 48px (font Quicksand) ed è composto da più righe, di cui una contiene una parola lunga e indivisibile ("direttamente").
Su desktop il titolo si vede perfettamente. Nella vista responsive / smartphone, invece, quella riga viene tagliata ai lati: la parola è più larga della cella e fuoriesce, venendo troncata sul bordo destro.
Il mio breakpoint mobile è attualmente impostato a 480px.
Quello che ho capito è che il problema non dipende dal breakpoint in sé, ma dal fatto che a 48px quella parola è più larga dello spazio disponibile sullo schermo del telefono. Vorrei capire come gestirlo restando il più possibile dentro X5, senza dover modificare i 48 pixel del titolo.
Le mie domande:
- C'è un modo, dentro le impostazioni dell'oggetto Testo o della cella, per impostare una dimensione del font diversa (più piccola) solo per la vista smartphone, mantenendo i 48px su desktop?
- In alternativa, come posso ridurre i margini/padding laterali della cella nella sola vista responsive, per dare più larghezza al testo ed evitare il taglio?
- Esiste un'impostazione nativa per far sì che il testo si ridimensioni automaticamente invece di essere troncato?
Grazie a chiunque possa aiutarmi.
url:https://www.sapora.it/sanremo/
PS. in allegato immagini con visione desktop e visione smartphone
Ciao Giuliano. Nelle versioni recenti di WebSite X5 hanno introdotto proprio una funzione di ottimizzazione automatica di testi e margini per il responsive. Non è un "modulo" separato tipo oggetto, ma una funzione nelle impostazioni responsive del progetto.
In pratica il percorso dovrebbe essere (io non dispongo dell'ultimna versione vado ad intuito):
Passo 2 → Template → Risoluzioni e Responsive Design → Testi e margini
e lì trovi l'opzione tipo:"Abilita la riduzione automatica di testi e margini".
Il funzionamento da loro dichiarato è:
Puoi anche impostare:
Da quello che descrivono, il loro sistema sembra essere una riduzione proporzionale automatizzata, non necessariamente un vero sistema CSS fluido basato su viewport (clamp(), vw, rem, ecc.).
La differenza è questa:
Approccio automatico X5:
Desktop:
H1 60px
Tablet:
H1 45px
Mobile:
H1 32px
Approccio moderno fluido:
font-size: clamp(32px, 5vw, 60px);
che significa:
Quindi secondo me è un passo avanti rispetto al vecchio sistema rigido, soprattutto per gli utenti meno esperti. Però per chi lavora su siti più avanzati, con slider, hero, layout particolari e controllo preciso, non sostituisce completamente un approccio CSS moderno. Diciamo che Incomedia ha finalmente affrontato uno dei problemi che io e altri avevamoi sollevato: la gestione dei testi responsive. Però rimane aperta la questione più ampia che abbiamo sempre contestato: dare al progettista il controllo completo del comportamento, non solo una regolazione automatica. In ogni caso meglio poco che nulla!
Ciao, da una prova online al volo questo codice dovrebbe funzionare per ridurre quel testo sotto i 480px:
@media (max-width: 479.9px) {
#imTextObject_98_tab0 .fs48lh1-5 {
font-size: 42px !important;
}
}
Codice da inserire al PASSO 2 nelle Proprietà della Pagina in questione, in Esperto/ Codice personalizzato/prima della chiusura del Tag HEAD
P.S. naturalmente in Website X5 il codice va racchiuso tra i tag <style> e </style>, quindi diventa così:
<style>
@media (max-width: 479.9px) {
#imTextObject_98_tab0 .fs48lh1-5 {
font-size: 42px !important;
}
}
</style>
ciao, con tanti saluti ad Ersilia...
... se non sbaglio, non trovo riscontro tra il tuo STAMP e quello che rilevo online, sia su telefonino che smartphone e tablet, l'aspetto è regolare...
...penso che forse ci hai già pensato e applicata la soluzione migliore, quella di usare un formato font congruo per la risoluzione minore, che non influenza minimamente sull'aspetto desktop, come noto adesso, e quello che conta è la leggibilità, e se è così, penso che hai trovato da te la quadra, praticamente hai risolto da te...
... al limite ad essere pignoli, il ,problema sulla struttura attuale si presenterebbe sotto ai 320px...
... comunque, ho voluto simulare lo stesso la situazione del tuo STAMP sotto ai 480px, per l'esattezza a 390x, e se ti interessa, e a saperlo e per casi simili, potresti usare la sillabazione indotta...
... praticamente quando fai il test immediato a risoluzioni basse, puoi rilevare subito la parola lunga ("direttamente") oltre lo spazio disponibile, a quindi potresti subito rimediare direttamente nell'oggetto testo (abilitato HTML [</>]) e la sillabazione si attiverà solo a necessità...
... nel caso ci sarebbero anche le altre soluzioni personalizzate con media-query, che per come vedo adesso non servirebbe, ma nel caso avvisami
... ... ciao, e buon proseguimento ... ...
.
Sei passato alla versione 2026.2.3 che ha la nuova funzione di ottimizzazione dei testi per le visualizzazioni responsive, hai fatto bene, è una delle poche, importanti e davvero utili funzioni rilasciate da Incomedia negli ultimi tempi.
Autor
Grazie mille Roberto, veramente utile la soluzione riduzione automatica:
Passo 2, testi e margini (comunque ben nascosti )
Ho dovuto cambiare quella predefinite del 30 % a 40 % di riduzione.
Questa Hero, in quel titolo non usa un H1 perchè ho voluto farla più grande, comunque a livello di SEO converrebbe impostarla come H1
Molto chiara la tua spiegazione, ti ringrazio ancora i ti incollo il risultato finale dopo le modifiche
Ersilia
PS. mi sento meglio!
Ciao Giuliano. Nelle versioni recenti di WebSite X5 hanno introdotto proprio una funzione di ottimizzazione automatica di testi e margini per il responsive. Non è un "modulo" separato tipo oggetto, ma una funzione nelle impostazioni responsive del progetto.
In pratica il percorso dovrebbe essere (io non dispongo dell'ultimna versione vado ad intuito):
Passo 2 → Template → Risoluzioni e Responsive Design → Testi e margini
e lì trovi l'opzione tipo:"Abilita la riduzione automatica di testi e margini".
Il funzionamento da loro dichiarato è:
Puoi anche impostare:
Da quello che descrivono, il loro sistema sembra essere una riduzione proporzionale automatizzata, non necessariamente un vero sistema CSS fluido basato su viewport (clamp(), vw, rem, ecc.).
La differenza è questa:
Approccio automatico X5:
Desktop:
H1 60px
Tablet:
H1 45px
Mobile:
H1 32px
Approccio moderno fluido:
font-size: clamp(32px, 5vw, 60px);
che significa:
Quindi secondo me è un passo avanti rispetto al vecchio sistema rigido, soprattutto per gli utenti meno esperti. Però per chi lavora su siti più avanzati, con slider, hero, layout particolari e controllo preciso, non sostituisce completamente un approccio CSS moderno. Diciamo che Incomedia ha finalmente affrontato uno dei problemi che io e altri avevamoi sollevato: la gestione dei testi responsive. Però rimane aperta la questione più ampia che abbiamo sempre contestato: dare al progettista il controllo completo del comportamento, non solo una regolazione automatica. In ogni caso meglio poco che nulla!
[/quote]
Sì, ho provato anche io la nuova funzione e in effetti per vedere applicato per bene l'effetto riduzione è preferibile cambiare il "fattore massimo di riduzione" da quello di default del 30% ad almeno il 40/45%.
Funziona tutto perfettamente ora
Autor
Kolazym, guarda un po la soluzione che ha dato Roberto, mi ha evitato di andare ad impicciarmi (termine moloto professionale) nel codice.
Da pignola extrema il trattino non lo userei per una questione estetica
. Misuro ogni pixel e deve essere tutto centrato, calcolato, gerarchizzato, ecc.
( continuo la lotta con il peso del carrello che è nativo in ogni progetto, muovete le alte sfere per inserirlo dove serve) così arrivo al verde su page speed
Sei tutti noi,
Grazie mille,
La zia Ersilia
Autor
Ciao Giuseppe,
Ho fatto una super cartella dove mi terro questo codice stretto, per il momento però c'e la soluzione al paso 2 responsive, stile testo.
comunque ti ringrazio molto!
Ersilia
Perfetto in alternativa andava bene anche il codice suggerito da Giuseppe Guida. Controlla bene tutti gli altri H1 del tuo sito web. Alla prima stranezza che trovi, togli quella impostazione e vai direttamente di codice sulla pagina.