CSS Code to adjust Image Picker in Mobile view

Boa tarde a todos,

Estou finalizando um formulário na plataforma de vocês para otimizar um processo interno da minha empresa, mas estou enfrentando dificuldades com a exibição das imagens, e gostaria muito de resolver isso antes de contratar um plano.

O problema está relacionado ao widget Image Picker, que estou utilizando para perguntas com resposta por imagem. O que acontece é o seguinte:

• Quando configuro as imagens para ficarem com um bom tamanho no computador, elas ficam grandes demais no celular, cortando as laterais;
• 
  
• Quando ajusto para caber no celular, elas ficam pequenas demais no computador.

Tentei resolver isso com CSS personalizado para tornar as imagens responsivas, mas não tive sucesso. Em alguns testes, a imagem ficou embaçada ou for a de escala.

Entrei em contato com o assistente virtual de vocês no WhatsApp há pouco, mas ainda não consegui resolver o problema. Por isso, estou recorrendo ao suporte técnico.

Este formulário é muito importante para minha empresa e, mesmo que a solução envolva algum custo adicional, estou disposto a negociar para resolver o quanto antes.

Agradeço desde já pela atenção e aguardo um retorno.

Olá Leonardo,

Obrigado por compartilhar seu problema com a responsividade das imagens no widget Image Picker.

Para resolver a questão do tamanho das imagens em diferentes dispositivos, o ideal é usar CSS personalizado diretamente no widget. No Form Builder, selecione o widget Image Picker, clique no ícone de varinha para abrir as configurações e, na aba Custom CSS, insira códigos que ajustem a largura e altura das imagens para que sejam responsivas, por exemplo, usando porcentagens em vez de valores fixos em pixels.

Se as imagens ficam embaçadas, isso pode ocorrer por redimensionamento inadequado. Tente manter a proporção original e usar propriedades CSS como max-width: 100% e height: auto para preservar a qualidade e ajustar o tamanho conforme a tela.

Se precisar de ajuda com o código CSS específico para o Image Picker, posso ajudar a criar um exemplo.

Fico à disposição para ajudar a otimizar seu formulário.

Leonardo, experimente essas dicas e me avise se precisar de mais suporte.

Atenciosamente,
Equipe Jotform

Hi RamosLeonardo, 

Thanks for reaching out to Jotform Support. You can fix that by Injecting CSS Codes to help adjust the your form in mobile view. Let me walk you through it:

1. First, copy this code:

@media (max-width: 350px){

.form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

min-width: 100px !important;

}

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Give it a try and let us know how it goes.