WebSite X5Help Center

11 RéPONSES
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... 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
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User

Separator è uno dei pochi oggetti realmente responsive. Non è che per caso fai riferimento a Simple separator?  

Lire plus
Posté le de Roberto M.
Domenico B.
Domenico B.
User
Auteur

Ragazzi Separator e questo 
Con le icone o immagini è ok, ma con il testo no, no taglia

Lire plus
Posté le de Domenico B.
Domenico B.
Domenico B.
User
Auteur

*lo taglia

Lire plus
Posté le de Domenico B.
Roberto M.
Roberto M.
User

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.

Lire plus
Posté le de Roberto M.
Roberto M.
Roberto M.
User

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?

  • 48px su desktop → sempre, senza riduzioni.
  • Sotto 600px:
    • 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.

Lire plus
Posté le de Roberto M.
Giancarlo B.
Giancarlo B.
User
Meilleur utilisateur du mois IT
Roberto M.
Nel tuo caso applica questo codice NON unico e NON esclusivo.

... laughing

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Domenico B.
qui trovate il separatore https://www.eddielang.it/

... 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 
.
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User

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.

  • 1vw = 1% della larghezza dello schermo
  • 4vw = 4% della larghezza dello schermo

Quindi:

  • Se lo schermo è largo 1000px, 4vw = 40px
  • Se lo schermo è largo 400px, 4vw = 16px

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é:

  • il codice rende il testo elastico sempre, anche su desktop
  • questo può creare testi enormi su monitor grandi
  • non rispetta il design originale
  • non è controllato né elegante

===================

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.wink

Lire plus
Posté le de Roberto M.
Domenico B.
Domenico B.
User
Auteur

Grazie Mille! sono tutte perfettamente funzionanti! le o applicate e funzionano benissimo! 
Grazie mille Roberto e KolAsim ‪ ‪! 

Lire plus
Posté le de Domenico B.