Expand the fields width on mobile

Salve.
In allegato invio uno screnshot per farvi vedere come appaiono i campi da compilare, sul telefono cellulare. Come potete vedere essi sono molto stretti e questo non dipende dalle impostazioni della loro larghezza, nè dalla larghezza del modulo.

Potete suggerirmi un modo per far allargare la visualizzazione dei campi?

Grazie per la risposta,

Antonello Grimaldi

Buongiorno Antonello,

Grazie per aver contattato il supporto tecnico di Jotform. Potresti confermare che si tratta di questa pagina web? Ho verificato la pagina e non sono riuscito a replicare la situazione descritta, la lunghezza dei campi sembra essere ottimale per la visualizzazione e la compilazione degli stessi.

Ho utilizzato un dispositivo Androide per aprire il modulo. Potresti dirci quale dispositivo stai utilizzando? Inoltre, potresti provare con un dispositivo diverso e verificare se la situazione persiste?

Rimaniamo in attesa di ulteriori informazioni.

Ciao Joseph, grazie a te per la risposta.

La pagina di cui ti ho mandato l'immagine è questa:

https://www.telegrammionline.it/invia-telegramma/

Devi simulare un l'inizio dell'ordine e passare alla pagina successiva del modulo, dove vedrai i campi che ti ho inviato

Io ho utilizzato un Samsung ma credo che con Android sia la stessa cosa.

Grazie ancora per la tua assistenza,

Antonello

Salve Antonello,

Grazie per averci contattato. Ho testato il suo modulo incorporato sul suo sito con il mio Galaxy Fold e ho potuto replicare il problema. Può provare a risolvere questo problema utilizzando un codice CSS. Le spiego come fare:

1. Nel Costruttore di Moduli, fare clic sul pulsante Designer Moduli, in alto a destra dello schermo.
2. Successivamente, fate clic sulla scheda Stile.
3. Scorrete verso il basso fino a Inserisci CSS Personalizzato e incollare il codice fornito di seguito:

/* CSS code for mobile screen only */

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

/* Code to increase the fillable fields */

ul.form-section.page-section {

    width: 260px;

    padding: 0px 0px 0px 0px;

}

/* Code to center buttons */

.form-buttons-wrapper.form-buttons-center.jsTest-button-wrapperField.form-pagebreak {

    width: 263px;

}

/* Code to Risize the error message at the top */

span.error-navigation-message {

    font-size: 10px;

}

/* Code to Risize the error button at the top */

button.error-navigation-next-button {

    font-size: 10px;

    margin: 1px 30px 3px 20px;

}

/* End of CSS code */

Risultato:

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

Perfetto. Problema risolto! Grazie!

Grazie davvero per la vostra cortesia e la vostra professionalità.

Antonello Grimaldi

Gentile Vincenzo, da qualche tempo il CSS non funziona più. Allego l'errore che il sistema riferisce.

Potresti aiutarmi di nuovo? Grazie mille per la vostra solita cortesia,

Antonello

Hi Antonello,

Thanks for reaching out to Jotform Support. Unfortunately, our Italian Support agents are busy helping other Jotform users at the moment. 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, keep in mind that you'd have to wait until they're available again.

Now, let me help you with your question. I checked your website on my mobile phone, and the fields appear to be properly formatted. Take a look at the screenshot below to see my results:

If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better?

Reach out again if you need any more help.

Thanks Ericson for your reply. Jotform always stands out for the speed and courtesy of its operators. I'll send you the image of how the form looks on my samgung. As you can see the fields are much shorter than they appear in the image you sent me. My need is to enlarge the individual fields as much as possible, bringing them almost to the left and right edges of the form.

Thanks again, Antonello

Hi Antonello,

I'm very sorry to hear that. Can you inject the below CSS Code into your form instead?

/* Expand fields' width on mobile - #9076583 */

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

li {

  min-width: 112% ! important;

  margin-left: -20px;

}

}

/* Code ends here */

Here's what it should look like when I tested it on iPhone 14 Pro Max:

Give it a try and let us know if you need any more help.