Adattamento del testo su sito responsive 
Autore: Valentina F.Ho creato un sito (www.inesergo.it) che, per come è concepito graficamente, contiene anche testi di dimensioni medio-grandi (36px). Quei testi nella versione desktop sono perfetti, su smartphone/tablet mantengono la stessa dimensione e diventano sgradevolmente grandi. E' possibile modificare la dimensione di quei caratteri in base al supporto che li visualizza?
Ho trovato una discussione dell'ottobre 2016 che suggeriva di scrivere il seguente codice prima della chiusura di HEAD:
"... a seconda del breakpoint che vuoi controllare (nel caso 719) potresti usare questo codice:
<style> @media screen and (max-width: 719px) { * {font-size:12px !important;} } </style>
... al posto di (*) puoi controllare singoli ID, ed i valori ovviamente li personalizzerai ad hoc per quel che ti serve...
... pannello Esperto | codice personalizzato | prima della chiusura di HEAD..."
Ho provato ad inserire quel codice nella sezione "proprietà/esperto" della singola pagina ma sembra non cambiare nulla. Ho immesso lo stesso codice nella sezione "SEO/Esperto", ma anche in questo caso nessun risultato.
Ho quindi provato a sostituire l'oggetto "TESTO" con l'oggetto "TITOLO" in quanto quest'ultimo dimensionerebbe il carattere in base alla larghezza del campo che lo contiene, ma, nel caso del mio sito, pure questo tentativo non sortisce l'effetto sperato.
Come posso procedere?
Complimenti per il sito, mi piace molto... ho notato che per ora non è resonsive: per il problema della grandezza dei font?
Prova ad usare l'oggetto titolo.
Ciao
... x Valentina, quel codice l'avevo proposto io, anche se non ricordo in quali occasioni, comunque funziona, ...si modifica tutto il testo della pagina...
... nella pagina del tuo link hai indicato un selettore/DIV con ID che non esiste nella pagina, oltre che digitato in modo errato
imCell_28 contro #imCell_28 ...nel modo corretto con il cancelletto (#), sempre che il DIV esistesse...
... al limite indica con precisione cosa vorresti ottenere...
... non essendo attualmente un sito responsive, anche se il codice può funzionare, il tutto lascerebbe il tempo che trova...
.
ciao
.
Scusa non avevo letto bene il tuo post e non mi ero accorto che con l'oggetto titolo avevi già provato.
Puoi fare così con i css:
metti il testo del titolo in oggetto html circondato da un div a cui assegni un id
esempio:
<div id=testo> Quando la plastica diviene arte</div>
metti poi i css in esperto dell'oggetto
esempio:
#testo { font-size:70px ;
text-align: left;}
@media only screen and (max-width: 961px)
{#testo{font-size:50px ;} }
@media only screen and (max-width: 720px)
{#testo only {font-size:40px;} }
@media only screen and (max-width: 600px)
{#testo only {font-size:30px ;} }
@media only screen and (max-width: 480px)
{#testo{font-size:26px ;} }
@media only screen and (max-width: 360px)
{#testo{font-size:20px ; } }
Naturalmente dovrai settare il sito come responsive e personalizzare i valori dei max-width e font-size.
http://cirelli.altervista.org/italia.php#.W24OH7h9jcs
Autore
X Giorgio C: ti ringrazio per i complimenti. Si, al momento il sito non è responsive perchè i caratteri non funzionano come vorrei. Stasera uploaderò il sito aggiornato su "supergiggia.altervista.org" in modo da farti capire quello che intendo e che vorrei. Al momento c'è solo una versione ultra-beta :-)
X KolAsim: se dici che il codice funziona e che l'errore sta nell'individuazione del DIV a cui far riferimento, sono prontissima ad accettare consigli. Non mastico granchè l'HTML e non mi è così facile individuare con certezza il DIV dove vorrei fosse applicato il codice. Esiste tramite l'interfaccia di website una maniera intuitiva per immettere la tua istruzione proprio in quell'oggetto? Stasera uploaderò il sito con la versione responsive su un altro indirizzo in modo tale fa farvi capire.
Grazie 1000 a tutti!
Autore
X Giorgio C: quello che accade sul sito che hai postato è esattamente quello che vorrei facesse anche il mio. Proverò a seguire il tuo suggerimento.
Grazie ancora!!!
... con il codice postato inizialmente con il selettore "*" si modificano tutti i punti fonts della pagina, senza dover individuare un particolare selettore; ...casomai basta cliccare con il destro del mouse sull'oggetto interessato su chrome ed ispezionare il codice per individuarne l'ID...
... come vedi > QUI in questo clone temporaneo! a grandi linee il codice funziona, me come detto precedentemente in quel conteso lascia il tempo che trova!... (Ctrl+U righe 27-42)...
ciao
Autore
Ho uploadato il sito responsive su supergiggia.altervista.org.
Sono andata su chrome per cercare di individuare gli oggetti (di cui allego foto) sui quali vorrei agisse il codice .
Se non erro i DIV/id dovrebbero essere i seguenti:
imCell_27 e imCell_56
La grandezza del carattere dovrebbe passare da 36 e 24px a, per esempio, 12 e 16px
In questo caso il codice da scrivere prima della chiusura della HEAD è il seguente?
<style> @media screen and (max-width: 719px) { #imCell_27 {font-size:12px !important;} } </style>
<style> @media screen and (max-width: 719px) { #imCell_56 {font-size:16px !important;} } </style>
Ho anche fatto uno screenshot di come appare la pagina adesso e una simulazione di come dovrebbe venire (+ o -)
Il codice va poi riportato nella sezione esperto delle proprietà della singola pagina sulla quale si vuole che il codice agisca? perchè immagino che ogni pagina avrà DIV con diversi ID....
Grazie 1000!
... in rete vedo che non hai corretto...
... elimina quello che avevi messo, e prova il risultato incollando al suo posto questo:
<style>
@media screen and (max-width: 719px) {
#imCell_27, #imCell_27 div, #imCell_56, #imCell_56 div{min-height:0px !important;padding:0px !important;}
#imTextObject_27_tab0 .fs24lh1-5 {font-size: 12px !important; line-height: 12px !important;}
#imTextObject_56_tab0 .fs36lh1-5 {font-size: 16px !important; line-height: 16px !important;}}
</style>
.
Valentina perché ti complichi la vita?
Usa l'oggetto html e assegni tu il div che puó essere sempre uguale per tutti i titoli che inserisci, dovrai così mettere un solo foglio di stile per tutto il tuo sito
Autore
Sarebbe fantastico, il solo problema è che, da quanto capisco, il codice andrebbe adattato pagina per pagina (ogni pagina crea i suoi DIV e ID percui quello che in una pagina si chiama #imCell_01 in un'altra pagina si chiamerà #imCell_02, nella terza pagina #imCell_03 e così via) e non solo, dal momento in cui molte pagine del sito sono in continua evoluzione e, di conseguenza, i contenuti e gli oggetti cambiano, dovrei ogni volta andare ad individuare DIV/id e associare il codice a quegli oggetti...
Magari mi perdo in un bicchier d'acqua ma temo diventi davvero complicato....
Autore
Non mi è molto chiaro. Ok per l'inserire l'oggetto HTML, poi però mi perdo.....
Mi spiego meglio...
inserisci il titolo nell'oggetto html, per esempio
<div id="testo"> Quando la plastica diviene arte</div>
come vedi ho inserito un valore dell'ID personalizzato.
Ora puoi inserire il foglio di stile per quell'ID per tutto il sito, e lo metti al
passo 1> in statistiche, seo e Codice > esperto > Prima della chiusura di Head.
per esempio:
#testo { font-size:70px ;
text-align: left;}
@media only screen and (max-width: 961px)
{#testo{font-size:50px ;} }
@media only screen and (max-width: 720px)
{#testo only {font-size:40px;} }
@media only screen and (max-width: 600px)
{#testo only {font-size:30px ;} }
@media only screen and (max-width: 480px)
{#testo{font-size:26px ;} }
@media only screen and (max-width: 360px)
{#testo{font-size:20px ; } }
Dovrai personalizzare i valori max-width con quelli delle tue risoluzioni e i valori font-size con quelli cheritieni più opportuni per il tuo sito.
Fatto questo, ogni volta che nel tuo sito inserisci un oggetto testo con quell'ID il testo cambierà secondo la risoluzione impostata, senza dover reinserire altri fogli di stile.
Ciao
... esatto, ...ma nel modo che sai già individui con facilità l'ID, e con le mie stringhe aggiuntive si regola anche l'altezza dell'oggetto contenitore, come penso che hai avuto modo di verificare, altrimenti sarebbe inguardabile...
... oltre a quanto suggerito da Giorgio, ...potresti usare un altro modo alternativo poco impegnativo, ...funzionante nei browser attuali...
... potresti quindi provare ad usare per il testo un Oggetto Codice HTML al quale assegni l'opzione > "▪Abilita Altezza Automatica", e nel quale incollare questa stringa di codice html in un div_custom nel modo che vedi qui:
<div style="font-size: 5vw">
Testo Bla bla blaBla bla blaBla bla blaBla bla blaBla bla blaBla bla blaBla bla blaBla bla bla
</div>
...!... il punto font si adatterà in percentuale rispetto alla larghezza della finestra del browser, e non dell'Oggetto HTML che fa da contenitore...!...
... dove nel codice vedi 5vw, ... il valore 5 sta ad indicare il 5% della larghezza attuale della finestra del browser; ... in questo caso per una finestra di 1000px il font ↕ sarà di 50px; ...per una finestra di 700px il font ↕ sarà di 35px; ...ecc.....
... quindi una volta individuato il valore per te più adatto digitando div per div il tutto si semplificherà al massimo...
... non ti resta che fare un Copia/Incolla per provare immediatamente...
... purtroppo non avendo il programma non posso dirti di più nel merito...
ciao
.
Ancora più semplice!! Chapeau
Autore
Sarebbe fantastico, il solo problema è che, da quanto capisco, il codice andrebbe adattato pagina per pagina (ogni pagina crea i suoi DIV e ID percui quello che in una pagina si chiama #imCell_01 in un'altra pagina si chiamerà #imCell_02, nella terza pagina #imCell_03 e così via) e non solo, dal momento in cui molte pagine del sito sono in continua evoluzione e, di conseguenza, i contenuti e gli oggetti cambiano, dovrei ogni volta andare ad individuare DIV/id e associare il codice a quegli oggetti...
Magari mi perdo in un bicchier d'acqua ma temo diventi davvero complicato....
[/quote
Con un po' di pazienza ho individuato tutti i DIV/Id e, applicatando il tuo codice, ho modificato tutte le pagine.
Finalmente il RESPOSIVE funziona correttamente!!!
Sono veramente contenta! GRAZIE infinite! Siete dei grandi!