WebSite X5Help Center

 
Domenico B.
Domenico B.
User

L'oggetto Separator non e responsive  it

Автор: Domenico B.
Просмотрено 149, Подписчики 2, Размещенный 0  

L'oggetto Separator non e responsive

Размещено
11 Ответы
 ‪ 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
.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User

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

Читать больше
Размещено От Roberto M.
Domenico B.
Domenico B.
User
Автор

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

Читать больше
Размещено От Domenico B.
Domenico B.
Domenico B.
User
Автор

*lo taglia

Читать больше
Размещено От 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.

Читать больше
Размещено От 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.

Читать больше
Размещено От Roberto M.
Giancarlo B.
Giancarlo B.
User
Лучший пользователь месяца IT
Roberto M.
Nel tuo caso applica questo codice NON unico e NON esclusivo.

... laughing

Читать больше
Размещено От 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 
.
.

Читать больше
Размещено От  ‪ 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

Читать больше
Размещено От Roberto M.
Domenico B.
Domenico B.
User
Автор

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

Читать больше
Размещено От Domenico B.