WebSite X5Help Center

 
Salvatore N.
Salvatore N.
User

Testo responsive che si adatta riducendo la dimenzione del font  it

Auteur : Salvatore N.
Visité 1110, Followers 2, Partagé 0  

Salve Community di X5, ho visto su alcuni templates online (non quelli di X5) che il testo allo scalare della grandezza della pagina (riducendo la finestra manualmente) si adatta anche scalando la grandezza del font. Su X5, invece la dimensione rimane del font rimane invariata anche se si adatta alla larghezza della pagina.  Vorrei sapere se c'è un metodo per ottenere lo stesso effetto con X5 Pro (ultima versione). Grazie 

Posté le
11 RéPONSES - 2 UTILE - 1 CORRECT
Giancarlo B.
Giancarlo B.
User
Meilleur utilisateur du mois IT

Se usi l'oggetto testo per diminuire la dimensione del font devi utilizzare del codice esterno mentre con l'oggetto titolo adatta al contenuto è automatico il ridimensionamento vado a memoria ma dovrebbe essere così

Lire plus
Posté le de Giancarlo B.
Salvatore N.
Salvatore N.
User
Auteur

Grazie per la risposta Giancarlo, sapresti indicarmi qual'è il codice da inserire e dove inserirlo? 

Lire plus
Posté le de Salvatore N.
Giancarlo B.
Giancarlo B.
User
Meilleur utilisateur du mois IT

Ciao Salvatore, ti rispondo dallo smartphone quindi non sarà molto dettagliata la risposta, questo è il codice

@media (max-width: 479px) {

  #imCellStyle_3 {

   font-size:10px !important;

}

479px è la risoluzione di intervento

imCellStyle_3 è l'oggetto in questione

   font-size:10px la dimensione del font a quella risoluzione

Queste sono tutte variabili che tu dovrai gestirti

Lire plus
Posté le de Giancarlo B.
Salvatore N.
Salvatore N.
User
Auteur

Grazie a tutti per le risposte e complimenti @Giancarlo per il suo sito. Ho già provato il codice suggerito da Giorgio e funziona alla perfezione cool Vorrei chiedervi qual'è il Codice CSS da inserire per settare ad esempio un google font specifico come quello che uso negli oggetti di testo del progetto

Lire plus
Posté le de Salvatore N.
Giancarlo B.
Giancarlo B.
User
Meilleur utilisateur du mois IT

Quando n un oggetto scegli il tipo di font puoi specificare è scegliere la liberatoria Google font ti si apre una finestra dove potrai scegliere il font desidero con le ultime versioni di website non occorre codice viene gestito da programma

Lire plus
Posté le de Giancarlo B.
Salvatore N.
Salvatore N.
User
Auteur

Ho risolto x quanto riguarda il google font prelevando il codice su https://fonts.google.com/ e inserendolo così come di seguito nella TAB "Esperto - Codice CSS" : 

#testo { font-family: 'DM Serif Display', serif;
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 ; } }

Spero possa aiutare qualcun altro wink

Lire plus
Posté le de Salvatore N.
Salvatore N.
Salvatore N.
User
Auteur

Hai ragione Giancarlo, ma questo lo puoi selezionare solamente sull'oggetto testo ma non in quello HTML nel quale va specificato nel codice CSS

Giancarlo B.
Quando n un oggetto scegli il tipo di font puoi specificare è scegliere la liberatoria Google font ti si apre una finestra dove potrai scegliere il font desidero con le ultime versioni di website non occorre codice viene gestito da programma
Lire plus
Posté le de Salvatore N.
Giancarlo B.
Giancarlo B.
User
Meilleur utilisateur du mois IT

Ho visto ora il codice di Giorgio  io utilizzo l'oggetto testo quindi mi risulta più semplice inserire il tipo di font 

Lire plus
Posté le de Giancarlo B.
Giancarlo B.
Giancarlo B.
User
Meilleur utilisateur du mois IT

Questo è il codice inserito sulla pagina che avevo linkato, come vedi è poco

  1. <style>
  2. @media (max-width: 480px){
  3. #imTextObject_15_02_tab0 .ff1 {
  4. font-size:38pt!important
  5. }
  6. }
  7. </style>

Il resto è gestito dal programma.

Ciao Giancarlo.

Lire plus
Posté le de Giancarlo B.