Como Remover o Espaço em Branco em Torno das Escolhas de Imagem

Pretende eliminar o espaço extra em torno das suas imagens ao utilizar Escolhas de Imagem para os seus campos de formulário de Caixa de Seleção ou Escolha Múltipla? Com apenas algumas linhas de CSS, pode conseguir isto sem esforço, e nós estamos aqui para o guiar através do processo!

Criação do formulário

Primeiro, comece por criar o seu formulário no WPForms. Assim que tiver criado o seu formulário, adicione os campos de que necessita, incluindo o campo Escolha Múltipla que servirá de base para a nossa configuração de Escolhas de Imagem.

Se não tem a certeza de como configurar as Escolhas de Imagem, pode consultar a nossa documentação sobre como adicionar Escolhas de Imagem ao WPForms. Basta clicar aqui para obter instruções detalhadas.

Remover o espaço em branco

Se não tem a certeza de como ou onde adicionar CSS ao seu site, pode consultar este tutorial para obter orientação.

Para todos os formulários

Por defeito, quando adiciona Escolhas de Imagem ao seu formulário, aparece um espaço em branco à volta da imagem devido ao preenchimento CSS. Este espaço em branco pode ser visto na imagem abaixo:

Para remover este espaço em branco, terá de copiar e colar o seguinte código CSS no seu site:

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

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

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

Este código CSS não só removerá o espaço em branco à volta das imagens, como também ocultará os rótulos associados a cada imagem, permitindo que as imagens se destaquem.

Para um formulário específico

Para remover este espaço em branco para o ID do formulário 1328, terá de copiar e colar o seguinte código CSS no seu site:

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;
}

E é tudo! Removeu com sucesso o espaço em branco à volta das imagens no seu formulário. Porque não consulta mais artigos sobre como estilizar Escolhas de Imagem? Dê uma vista de olhos ao nosso artigo sobre Como Personalizar os Rótulos para Escolhas de Imagem.