Come rimuovere gli spazi bianchi dalle scelte di immagine circostanti

Volete eliminare lo spazio extra che circonda le immagini quando utilizzate le scelte di immagine per i campi dei moduli Checkbox o a scelta multipla? Con poche righe di CSS è possibile ottenere questo risultato senza sforzo e noi siamo qui per guidarvi in questo processo!

Creazione del modulo

Per prima cosa, iniziare a creare il modulo in WPForms. Una volta creato il modulo, aggiungete i campi necessari, compreso il campo a scelta multipla che servirà come base per la nostra impostazione di Scelte di immagini.

Se non siete sicuri di come impostare le scelte di immagine, potete consultare la nostra documentazione su come aggiungere le scelte di immagine a WPForms. Cliccate qui per avere istruzioni dettagliate.

Rimozione degli spazi bianchi

Se non siete sicuri di come o dove aggiungere i CSS al vostro sito, potete consultare questa guida.

Per tutte le forme

Per impostazione predefinita, quando si aggiungono scelte di immagini al modulo, appare uno spazio bianco intorno all'immagine a causa del padding CSS. Questo spazio bianco è visibile nell'immagine seguente:

Per rimuovere questi spazi bianchi, è necessario copiare e incollare il seguente codice CSS nel sito:

span.wpforms-image-choices-label {
    display: none !important;
}

.wpforms-field-label-inline {
    line-height: 0 !important;
}

label.wpforms-field-label-inline {
    padding: 0 !important;
}

Questo codice CSS non solo rimuove gli spazi bianchi intorno alle immagini, ma nasconde anche le etichette associate a ciascuna immagine, consentendo alle immagini di stare da sole.

Per un modulo specifico

Per rimuovere questo spazio bianco per l'ID del modulo 1328è necessario copiare e incollare il seguente codice CSS nel sito:

form#wpforms-form-1328 span.wpforms-image-choices-label {
    display: none !important;
}
 
form#wpforms-form-1328 .wpforms-field-label-inline {
    line-height: 0 !important;
}
 
form#wpforms-form-1328 label.wpforms-field-label-inline {
    padding: 0 !important;
}

Ed ecco fatto! Avete rimosso con successo gli spazi bianchi intorno alle immagini nel vostro modulo. Perché non dare un'occhiata ad altri articoli sullo stile delle scelte di immagine? Date un'occhiata al nostro articolo su Come personalizzare le etichette per le scelte di immagine.