L'oggetto Separator non e responsive 
Author: Domenico B.
Visited 123,
Followers 2,
Shared 0
L'oggetto Separator non e responsive
Posted on the

... purtroppo senza vedere non posso immaginare; ...cosa intendi per responsive...!?...
... forse non ho capito cosa intendi, ma ho fatto una rapida prova con l'icona stellina, e si adatta al layout in tutte le risoluzioni:...
.
ciao
.
Separator è uno dei pochi oggetti realmente responsive. Non è che per caso fai riferimento a Simple separator?
Author
Ragazzi Separator e questo
Con le icone o immagini è ok, ma con il testo no, no taglia
Author
*lo taglia
Author
qui trovate il separatore https://www.eddielang.it/
Hai ragione Domenico. Nel sito da te postato non mi da problemi di taglio ma ho fatto delle prove su una pagina test ed effettivamente coi testi oltre i 36PX taglia la scritta. Solita anomalia segnalata e ri-segnalata non solo per questo oggetto ma per TUTTO. Solo con codice extra riesci a migliorare oppure devi centellinare la grandezza del testo facendo delle prove. Io non ho mai utilizzato questo separatore per delle scritte e questo mi ha indotto in errore in quanto come da te stesso precisato, con immagini e icone è OK.
Nel tuo caso applica questo codice NON unico e NON esclusivo. Copia e incolla nelle proprietà della pagina il seguente listato.
<style>
#pluginAppObj_53 .separator-text {
white-space: nowrap;
font-size: 48px; /* dimensione desktop */
overflow: visible;
}
/* SOLO su schermi piccoli */
@media (max-width: 600px) {
#pluginAppObj_53 .separator-text {
font-size: clamp(14px, 6vw, 32px); /* si riduce solo su mobile */
}
}
</style>
=============
Cosa abbiamo fatto?
clamp() riduce gradualmente il font:
minimo 14px
massimo 32px
valore fluido basato su viewport (6vw)
Il testo rimane sempre su una riga, senza tagli. Puoi abbassare il valore minimo ►:font-size: clamp(10px, 5vw, 32px);
#pluginAppObj_53 .separator-text è il tuo ID.
Fammi sapere se è andato tt ok.
...
... ah! per il testo! ... ...comunque nessun problema nel tuo LINK, (...se non di controllare altri fattori più importanti sotto 1200px...)...
... per il separatore con testo penso che basti fare delle prove per sapersi regolare di conseguenza, come del resto si fa per tutte le altre cose...
... per certi problemi minimi sono previsti pannelli per personalizzare con semplicità e facilità, nel caso aiuta fare una domanda a Tema nel HelpCenter...
... per esempio per tale oggetto separator è prevista la relativa scheda "Codice" che si presenta per esempio in questo modo:
#pluginAppObj_3_08 {
}
... per rendere il relativo testo elastico, per tutte le risoluzioni, se proprio lo si vuole(!), basta personalizzare il codice proposto, così:
#pluginAppObj_3_08 * {
font-size:4vw !important;
}
... se invece vuoi che l'effetto elastico si attivi solo sotto al tuo penultimo breakpoint (720px), allora modifica così:
@media (max-width: 720px) {
#pluginAppObj_3_08 * {
font-size:4vw !important;
}}
.... un paio di prove per sistemare ad hoc e il gioco è fatto...
.
ciao
.
.
Ciao Domenico. Con il codice che ti ho proposto, mantieni 48PX fino a quando non incontra il media query che opera dai 600px a scendere poi fai tu. Questo è un codice che si può scrivere in tanti modi diversi bisognerebbe sapere cosa esattamente ti serve.
Io sono andato per logica della serie: Testo originale fino ad un certo punto e poi ridimensionato, non adattato e non elastico.Parlo di responsive.
Devi sempre calcolare in programmazione vwè un’unità di misura CSS che significa viewport width, cioè percentuale della larghezza dello schermo.
Quindi:
Usare vw (come tanti suggeriscono) è un modo valido per rendere il testo elastico e responsive, ma non hanno ragione sulla soluzione migliore per un cliente, perché:
===================
Con il tuo ID preso dal sito in evidenza:
<style>
#pluginAppObj_53 .separator-text {
white-space: nowrap;
font-size: 48px; /* dimensione desktop */
overflow: visible;
}
/* SOLO su schermi piccoli */
@media (max-width: 600px) {
#pluginAppObj_53 .separator-text {
font-size: clamp(14px, 6vw, 32px); /* si riduce solo su mobile */
}
}
</style>
Ora non resta che regolarti.
Author
Grazie Mille! sono tutte perfettamente funzionanti! le o applicate e funzionano benissimo!
Grazie mille Roberto e KolAsim !