Codice CSS per dividere il titolo della lista prodotti su due linee quando visualizzato sugli smartphone

Joseph,

vorrei anche sapere se fosse possibile allineare i titoli su due righe dei massaggi dove troppo lunghi

sono putroppo attento all'estetica e non è il massimo in visualizzazione con il telefono vedere per esempio 50 e su altra riga minutes andrebbe il 50 sulla stessa riga dei minutes.

Ti mando lo screen shot.

Se tutti i titoli potessero essere gestiti su 2 righe sarebbe meglio se mi spieghi come fare o se lo puoi fare tu per me.

Grazie

Raffaele

Buonasera Raffaele,

Grazie per aver contattato il supporto tecnico di Jotform. Mostrare il titolo dei trattamenti su due righe quando il modulo viene mostrato sugli Smartphone è molto semplice. Per farlo dovrà aggiungere un ulteriore codice CSS al suo modulo. Le mostro come fare:

1. Nel Costruttore di Moduli, fare clic sul pulsante Designer Moduli, in alto a destra dello schermo.
2. Quindi, fare clic sulla scheda Stili.
3. Scorrere fino a Inserisci CSS Personalizzato e inserire il codice sottostante:

/* Align Product List tiltes on Mobile in English - 15244041 */

@media only screen and (max-width: 480px){

#product-name-input_6_1059:lang(en) {

    width: 160px;

}

#product-name-input_6_1024:lang(en) {

    width: 180px;

}

#product-name-input_6_1035:lang(en) {

    width: 197px;

}

/* Align Product List tiltes on Mobile in Italian */

#product-name-input_6_1048:lang(it) {

    width: 180px;

}

#product-name-input_6_1024:lang(it) {

    width: 180px;

}

/* Align Product List tiltes on Mobile in Spanish */

#product-name-input_6_1059:lang(es) {

    width: 180px;

}

#product-name-input_6_1048:lang(es) {

    width: 158px;

}

#product-name-input_6_1024:lang(es) {

    width: 180px;

}

}

/* Code Ends Here */

Qui può testare questo modulo di prova o clonarlo per capire meglio come è stato configurato.

Provi e ci faccia sapere se ha bisogno di ulteriori chiarimenti.

Buonasera Vincenzo

ocme sempre grazie per l’aiuto chiedo ancora una volta se puoi aggiungere tu tutti i codici per traduzioni, alliniamenti e disposizione su due righe due titoli ?

per evitare confusione ?

grazie

Raffaele

Buonasera Raffaele,

Grazie per utilizzare Jotform. Come da lei richiesto ho aggiunto i codici CSS per allineare il testo e per modificare i titoli dei prodotti quando visualizzato da smartphone al suo modulo. Dia un¡occhiata al suo modulo facendo clic qui.

Restiamo a sua disposizione per ulteriori chiarimenti.

Buonasera Vincenzo,

grazie per l'aiuto. Ho verificato nella versione smartphone (Iphone 13) il MASSAGGIO SVEDESE ha il nuumero 50 nella prima riga lo dovrei spostare alla seconda e fare delle correzioni su altri titoli per esempio togliere il segno - e mettere sulla seconda riga dei massaggi 50 minuti e cosi per le altre lingue.

Per tutte i titoli dell'epilazione la parola con va nella seconda riga.

Se mi spieghi come fare e non creo danni posso farlo io per non disturbare te?

Grazie

Raffaele

Vincenzo aprendo il CSS nel modulo WELLNESS & SPA ho notato che è presente alla riga

153 e 163 lo stesso testo in italiano del massaggio decontratturante è normale che sia doppiato?

poi alla fine del CSS ci sono riportati 2 errori alla riga 194 e 310 di cosa si tratta?

Attendo risposta

Grazie

Raffaele

Buongiorno Vincenzo,

sono riuscito in qualche modo a migliorare la visione dei titoli ma non ancora come vorrei. Chiedo cortesemente di fare queste correzioni per tutte e 3 le lingue:

ITALIANO:

Prima riga: Massaggio alla Lavanda

Seconda riga: 50 minuti

Prima riga: Massaggio Svedese

Seconda riga: 50 minuti

Prima riga: Massaggio Relax

Seconda riga: 50 minuti

Prima riga: Bagno di Luna

Seconda riga: 50 minuti

Per tutte le epilazioni sulla seconda riga: spostare con filo

Per le altre lingue vorrei la stessa impostazione di poter scrivere su 2 righe come in italiano.

Per tutte le lingue la descrizione di epilazione :

15 minuti - 30 minuti potrebbe essere il grassetto come il titolo?

Attendo queste correzioni grazie

Raffaele

Hi Merigge,

Thanks for reaching out to Jotform Support. Our Italian Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Italian, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, I review your form in the Italian language on an iPhone 12, and it shows the Massaggio alla Lavanda and 50 minutes in separate lines.

Can you take a screenshot of what’s happening when you view the form on your mobile phone and send it to us? This guide will show you how to do that.

Also, I do not understood your question: Per tutte le epilazioni sulla seconda riga: spostare con filo. Can you explain with a screenshot how you want the field to show the hair removal fields?

Regarding your question about bolding the Could 15 minutes - 30 minutes, I have updated the custom CSS code on a cloned form.

Here's the cloned version of the form that you can clone and test.

Once we hear back from you, we'll be able to move forward with a solution.

Buonasera Sidhart,

come puoi vedere vorrei che 50 minuti indicato nella freccia venga messo sulla seconda riga,

Anche:

Massaggio Relax e Massaggio Svedese devono avere sulla seconda riga 50 minuti devono quindi essere

Massaggio Relax

50 minuti

Massaggio Svedese

50 minuti

Per epilazione come puoi vedere nella foto la parola con deve essere sposata all'inizio del secondo rigo per tutte le prestazioni Epilazioni.

Per favore puoi fare direttamente nel mio modulo queste correzioni e anche del grassetto di 15 minuti e per favore nelle altre lingue Spagnolo e Inglese deve essere spostato sulla seconda riga 50 minutes

in inglese:

Lavander Massage

Swidish Massage

Relaxation Massage

Draining Massage

Stone Massage

Moon Bath

in spagnolo spostare 50 minuti sulla seconda riga per i massaggi:

Descontracturante, Lavanda, Sueco, Drenante, Piedras, Bano de Luna

Grazie

Raffaele

Hello Raffaele,

Thanks for getting back to us. Let me try out some things first as I work on a solution.

Meanwhile, let us know if you have other questions.

Buongiorno

non ho altre domande spero possiate risolvere velocemente le richieste fatte

grazie

Raffaele

Hi Raffaele,

Thanks for waiting. I have made changes to your form as requested by injecting this CSS code:

@media only screen and (max-width: 480px) {

/* italian language */

[lang="it"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1035 { 

min-width: 240px !important;

padding-right: 2px !important;

margin-right: 0 !important;

}

[lang="it"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1031 { 

width: 170px !important; 

}

[lang="it"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1019 { 

width: 190px !important;

}



[lang="it"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1059 { 

width: 140px !important; 

}



[lang="it"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1072 { 

width: 190px !important;

}

[lang="it"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1073 { 

width: 125px !important; 

}



/* english */

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1074,

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1031,

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1059,

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1048 { 

width: 160px !important; 

}

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1024{

width: 140px !important; 

}

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1073 {

width: 95px !important;	 

}

[lang="en-UK"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1070 {

width: 165px !important;	 

}

/* español */

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1074,

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1024{

width: 165px !important;	

}

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1031{

width: 125px !important;	

}

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1048 {

width: 145px !important;	

} 

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1073 {

width: 115px !important;	

}

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1071,

[lang="es"] body form .form-all ul li[data-type="control_payment"] div div div div span #product-name-input_6_1070 {

width: 175px !important;

}

}

So the breaking lines are adjusted based on the specific element and on a specific language when the form is viewed in a mobile device. I didn't make any changes to the "15 minute" texts because I noticed that it is already set as bold. But if you would like to increase its font size, just let us know.

Feel free to check out your form and get back to us if you need more help.

Grazie William,

il modulo dove chiedo di intervenrire ora si chiama Agriturismo Merigge Wellness & Spa

ti chiedo solo per favore di aggiustare:

ITALIANO:

Epilazione sopracciglia con filo (riesce a stare in una sola riga?)

Epilazione sopra labbro con filo (riesce a stare in una sola riga?)

Epilazione viso completo con filo (riesce a stare in una sola riga?)

INGLESE:

Epilation sideburns with wire (riesce a stare in una sola riga?)

SPAGNOLO:

Masaje descontracturante (1 riga)

50 minutos (seconda riga)

Depilacion de menton con hilo (riesce a stare in una sola riga?)

Depilacion de patillas con hilo (riesce a stare in una sola riga?)

Depilacion facial completa con hilo (riesce a stare in una sola riga?)

Per il grasseto dei 15 e 30 minuti va bene cosi.

Ti allego una foto molti testi allineati giustificati hanno molti spazi vuoti si puo' migliorare ??

Grazie per l'aiuto

Raffaele

Buongiorno Raffaele,

Grazie per utilizzare Jotform. Come da lei richiesto ho apportato direttamente le modifiche dei titoli. Della lista, non ho potuto mettere sulla stessa riga solo due dei titoli forniti perché troppo lunghi, questi sono:

• Epilazione viso completo con filo
• Depilacion facial completa con hilo

Tutti gli altri titoli, invece, è stato possibile modificarli. Dia un'occhiata al suo modulo qui. Inoltre, dopo aver esaminato il suo screenshot, mi dispiace informarla che non è possibile agire sugli spazi vuoti perché questi vengono creati dallo stile giustificato, e non è possibile rimuoverli con un codice CSS perché la creazione di questi spazi dipende anche dalle dimensioni dello schermo utilizzato per visualizzare il modulo.

Restiamo a sua disposizione per ulteriori chiarimenti.

Buongiorno Vincenzo,

mi dispiace disturbare ulteriormente ma mancano ancora alcune correzioni e chiedo per favore di intervenire autorizzando sul modulo:

ITALIANO:

Spostare la proposizione con dei trattamenti epilazioni sulla seconda riga esempio:

Epilazione sopra labbro

con filo

questo per tutte se non è possibile mettere tutto su una riga magari riducendo di 1 punto il font di tutte le descrizioni???

E' SCOMPARSA LA DESCRIZIONE DEL MASSAGGIO DRENANTE IN ITALIANO E SPAGNOLO LA PUO' INSERIRE DI NUOVO?

Per il resto tutto ok grazie

Raffaele

Buongiorno Raffaele,

Nel messaggio precedente chiedeva di aggiungere "Epilazione sopra labbro con filo" su un'unica riga. Dunque, preferirebbe avere questo titolo su due righe?

Inoltre, ho notato che riducendo il font dei titoli delle descrizioni dei trattamenti, questo andrebbe a causare altri scompensi sul resto del modulo, dunque ho apportato una modifica specifica per i trattaemti "Epilazione viso completo con filo", "Depilacion facial completa con hilo" per farli entrare su una singola riga. Dia un'occhiata al suo modulo qui.

Infine, ho anche ripristinato la descrizione in italiano e spagnolo del trattamento "Massaggio Drenante".

Ci faccia sapere se ha bisogno di ulteriore aiuto.

Buongiorno Vincenzo

dove possibile preferisco tutto su un rigo dove non è possibile spostare sulla seconda riga da :

con filo e non solo la parola filo.

Ho notato che alcuni sono oltre il margine del riquadro per tanto chiedo a lei se lasciare così o spostare su dije righe i titoli che sforano leggermente il margine come per esempio
Epilazione viso completa con filo

ho notato anche in spagnolo alcuni sforamenti del margine di poco sempre per epilazioni.

chiedo in ultimo come foto che allego se fosse possibile nel rispetto dell’alliniamento giustificato richiesto (non voglio creare problemi) se tutti i testi di tutte le lingue possono iniziare dal margine sinistro della prima parola senza spazi perché esteticamente non è bello

grazie

Salve Raffaele,

Grazie per averci ricontattati. Ho modificato il codice in modo che possa entrare su una sola riga e allo stesso tempo non toccare i bordi. Inoltre, ho anche rimosso il rientro iniziale come da lei richiesto. Potrebbe controllare e farci sapere come va? Se si verificano ancora problemi, le chiedo gentilmente di inviarci degli screenshot per ogni problema così ci sarà più chiaro cosa fare.

Restiamo a sua disposizione per ulteriori chiarimenti.

Vincenzo grazie sono rimaste solo 2 cose da correggere allego foto

grazie

Buon pomeriggio Raffaele,

Grazie per averci ricontattati. Ho rimosso lo spazio e aggiustato il titolo del trattamento "Epilazione sopra labbro con filo" sul suo modulo, come da lei richiesto. Dia un'occhiata agli screenshot sottostanti:

Rimozione della riga vuota:

Trattamento "Epilazione sopra labbro con filo":

Restiamo a sua disposizione per ulteriori chiarimenti.

Tutto perfetto!!! Grazie 1000!!!

Se dovrò aggiungere dei prodotti in futuro le regole di allinementi e traduzioni saranno mantenute per i prodotti aggiunti?

Grazie e buona giornata

Raffaele

Buonasera Raffaele,

Grazie per utilizzare Jotform. Siamo felici di sapere che le nostre indicazioni e modifiche le siano state di aiuto. Se in un futuro dovesse aggiungere dei nuovi prodotti/trattamenti è possibile che per questi nuovi elementi sia necessario qualche adattamento via CSS. Pertanto, se così fosse, non esiti a contattarci e saremo felici di assisterla.

Restiamo a sua disposizione per ulteriori chiarimenti.

Buonasera Vincenzo,

Raffaele

PS VI FACCIO PUBBLICITA' PER AVERE ALTRI CLIENTI DEL NOSTRO SETTORE ACQUISTANDO I VOSTRI MODULI 2 LO HANNO GIA' FATTO!!

Buonasera Raffaele,

Grazie per averci contattato nuovamente. Poiché la sua ultima domanda riguarda temi diversi, per evitare possibili confusioni, ho spostato la sue nuove domande su nuove discussioni, per favore dia un'occhiata alle mie risposte facendo clic sui link sottostanti:

• Richiesta di tradurre la descrizione dei prodotti in Francese e Tedesco tramite CSS
• Modulo incorporato: come far coincidere la lingua del modulo con la lingua selezionata sul sito?

Restiamo a sua disposizione per ulteriori chiarimenti.