Place multiple image icons on the same line in mobile view.

Boa noite.

Já fiz do jeito que você me instruiu, mas não deu certo.

Segue em anexo como ficou no smartphone.

Gostaria de saber se há outra maneira de fazer com que os ícones fiquem lado a lado.

Segue o link:  https://form.jotformz.com/80974479181671 .

Obrigado.

Florisvaldo Pinto

As I understood from the other thread given below, you would like to make logos aligned side by side and my colleagues' CSS code suggestions couldn't meet your requirements.

https://www.jotform.com/answers/1438463

Maybe, you might consider merging the logos as PNG and use it in this way? Also, you may consider downloading the source code and changing the image dynamically depending on screen size using javascript.

How to get the Full Source Code of your Form

I have prepared 2 merged logo options for you and sent these images to your account email address.

You can see the demo form :

https://form.jotform.com/80980839323969

Bom dia.

Vou fazer o teste.

Obrigado

Bom dia Tina.

No caso deste link: 

https://form.jotform.com/80980839323969

A Visualização que aparece é a do visualizador do formulário, mas quando vejo no smartphone, os ícones ficam enfileirados. Mas estou querendo colocá-los lado a lado para ficarem mais organizados.

Vocês já viram algum menu como o que estou fazendo enfileirados? Há possibilidade de fazer assim?

Agradeço.

Florisvaldo Pinto

Sorry for the inconvenience. 

May I ask you to some visual examples of your expectations about the alignment of the logos on mobile view? Could you please provide us some visual examples such as screenshots, drawings etc. so we can understand your expectations and assist you more efficiently? 

We will wait for your response.

Ok Tina.

Boa note.

Segue em anexo a idéia que tenho para criar o formulário e como ele seria visualizado no smartphone. Atualmente quando o formumário é visualizado no smartphone, os ícones ficam enfileirados, no entanto gostaria que os ícones ficassem lado a lado.

Aguardo.

Obrigado.

Florisvaldo Pinto

Is this the form in question? If it is, you would need to upload the image icons individually, because it is currently all in one image. 

BDAVID boa noite.

Esta imagem que enviei é um exemplo de como estou querendo que fique no smartphone, porque atualmente os ícones ficam enfileirados na parte vertical.

Quando visualizamos no visualizador do jotform, vimos os ícones lado a lado (como estou querendo no smartphone), porem quando está no aparelho, ficam enfileirados.

A minha dificuldade é fazer com que os ícones fiquem conforme a imagem que enviei ( esta imagem criei no corel draw).

Se há possibilidade de poder colocar os ícones lado a lado quando forem visualizados no smarphone, agradeço a sua ajuda.

Este é o link do formulário que estou criando: https://form.jotform.com/80980839323969

Obrigado.

Florisvaldo Pinto

I believe it is possible with custom CSS code. So, please create a form example with the individual image side by side, and we can try to create a code that will make them stay side by side in mobile view. 

Ok.

O formulário é este https://form.jotformz.com/80974479181671.

Os ícones são os que estão neste formulário, exceto MENU ADMINISTRATIVO e MENU CONDÔMINO. Preciso

que estes ícones fiquem lado a lado no smartphone, pois estou criando um aplicativo e assim ficariam melhor

organizados.

Obrigado

Florisvaldo Pinto

I tried to adjust the positions of the images using Move to a New Line option which is under the Advanced tab. 

the result is given below:

Please check the demo form and do not hesitate to clone it if you need to:

https://form.jotform.com/80991496323970

How to Clone an Existing Form from a URL

you need to enable the Move to a New Line option for 1,3,5,6,8,10 and this option should be disabled for the other ones.

I hope it helps.

Bom dia Tina.

Estes procedimentos acima, já havia feito, mas como você me enviou fiz novamente, mas não obtive o resultado esperado.

O que ocorre é o seguinte: Ao criar o formulário no notebook e visualizar no pré visualizador do formulário, vimos os ícones lado a lado, porém quando visualizo no smartphone, os ícones continuam enfileirados, ou seja um em baixo do outro.

O que estamos tentando resolver é como colocar os ícones lado a lado de maneira que possa ser visualizados no smartphone. 

Após ter realizado o procedimento acima, ficou assim no smartphone (segue foto abaixo):

Não houve mudanças.

Agradeço.

Florisvaldo Pinto

Please try injecting the following CSS code to your form, as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

@media screen and (max-device-width: 40em){

#id_40,#id_43,#id_39,#id_47,#id_51,#id_48{

    width: 40% !important;

}

#id_42,#id_37,#id_41{

    width: 30% !important;

}

}

Bom dia BDAVID

Realizei os procedimentos que você me enviou, mas continua do mesmo jeito no smartphone. Só ficam lado a lado na visualização do formulário, mas no smartphone continua do mesmo jeito, ou seja enfileirados, com um ícone em baixo do outro.

Florisvaldo

I need to ask you for some time to find a solution for this issue. You will be notified via this thread as soon as possible.

Thank you for your patience and understanding in advance. 

OK, Tina.

Aguardo

Obrigado

I have updated the code in your form to this: https://form.jotformz.com/80974479181671

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

#id_40,#id_43,#id_39,#id_47,#id_51,#id_48{

    width: 40% !important;

}

#id_42,#id_37,#id_41{

    width: 30% !important;

}

}

Result:

Boa noite BDAVID.

Gostei.

É isso mesmo.

Agora preciso alinhá-lo

Obrigado.

Grande abraço.

Florisvaldo

May you please test this form and see if that's what you would like to implement on your form? https://form.jotform.com/80997407489981 

If so, then you only need to replace all the CSS code currently injected and add this one instead: 

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

  li[data-type="control_image"] {

    width: 40% !important;

    height: 100px;

}

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

I hope this helps. 

Boa noite  BDAVID.

Vi que ficou muito bom.

Agora gostaria da sua ajuda para alinhar os ícones desse jeito:

MENU ADMINISTRATIVO  (Ficar no Centro)

Administração                      Bens Patrimoniais

Agenda                                  Normal/Regimentos

Fotos/Vídeos                         Portaria

MENU CONDÔMINOS (Ficar no Centro)

Portal dos Moradores           CheckList

2ª Via Tx Condomínio           Segurança 

Agradeço.

Obrigado.

Florisvaldo

Ok. Kevin_G

É isso mesmo. Os ícones ficaram corretos.

Faltaram o MENU ADMINISTRATIVO e o MENU CONDÔMINOS  que não ficaram centralizados.

Obrigado

Florisvaldo

Conseguimos criar.

Obrigado.

Grande abraço

Florisvaldo

Hello again, 

It seems my colleagues' CSS code suggestions meet your expectation for mobile. Is the form okay now? 

Bom dia Tina.

Está ótimo. Exatamente como esperava.

Gostaria apenas de mudar a posição de FOTOS e VÍDEOS e PORTARIA, mudando suas posições, pois não consegui. Pronto assim ficará ótimo. 

Muito obrigado à toda a equipe.

Vocês realmente são muito atenciosos.

Muito obrigado.

Grande abraço.

Florisvaldo

The position goes in the order you have positioned your fields. How would you like them to be positioned? Could you illustrate it with a screenshot example?

Oi BDAVID

Foi feito mais na conta diferente.

Gostaria que apenas mudasse as posições de PORTARIA e FOTOS e VÍDEOS. Ficaria um no lugar do outro e pronto.

Segue o link: https://form.jotformz.com/80974479181671

Obrigado

Florisvaldo

So, you would like those two images to be in the same column?

If that is correct, please add this code:

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

#id_55{

    width: 100% !important;

}

}

Let us know if that helps.

Não BDAVID. Ficariam um após o outro como estão os outros. Porém FOTOS e VÍDEOS primeiro e PORTARIA depois.

FOTOS e VÍDEOS (esquerda) 

PORTARIA (direita)

Só mudar as posições.

Obrigado.

You will need to change their position in the form, example:

Result:

Ficou ótimo.

Conseguimos.

Grande equipe são vocês.

Thanks you my friend.

Grande abraço.

Florisvaldo