Form não se ajusta quando diminui a tela - layout responsivo

Não cheguei a ver profundamente todos elementos só pus minha atenção direto na questão:

Spoiler

<div style="vertical-align:central; height:60px; border-bottom-color:#1F426D; border-bottom-style:solid; border-bottom-width:medium; padding:5px; margin-bottom:10px; width:100%">
 <form action="login.php" method="post" name="login" id="login" class="login" onSubmit="return validaCampo(); return false;">
 <div style="margin-top:5px">
 <div style=" position:relative; display:inline-block; text-align:left; color: #F90; margin-right: 20px; font-size:20px">Assinante Premium</div>
 <div style=" position:relative; display:inline-block; text-align:left"><span class="glyphicon glyphicon-user" style="color: #C0C0C0; font-size:16px"></span></div>
 <div style=" position:relative; display:inline-block; text-align:left"><input name="user" type="text" class="user" id="user" style="background-color: #E6E6E6; border: #F90 thin solid; border-radius: 5px 5px 5px 5px; padding:5px; margin-right:10px; color: #666; font-weight:bold; box-shadow: 5px 5px 5px #CCCCCC" value="LOGIN"></div>
 <div style=" position:relative; display:inline-block; text-align:left"><span class="glyphicon glyphicon-lock" style="color:#C0C0C0; font-size:16px"></span></div>
 <div style=" position:relative; display:inline-block; text-align:left"><input name="pass" type="password" class="user" id="pass" style="background-color: #E6E6E6; border: #F90 thin solid; border-radius: 5px 5px 5px 5px; padding:5px; margin-right:10px; color: #666; font-weight:bold; box-shadow: 5px 5px 5px #CCCCCC" value="SENHA"></div>
 <div style=" position:relative; display:inline-block; text-align:left"><button type="submit" style="background:none; border:none"><span style="color: #F90; margin-left: 5px; font-size:16px">Entrar</span><span class="glyphicon glyphicon-circle-arrow-right" style="color: #F90; margin-left: 5px; font-size:20px"></span></div>
 </div>
 </form>
</div>

  

	 

	Percebi olhando o código HTML e no seu CSS que em nenhum momento a o tratamento responsivo desse campo.

	Tente usar menos a injeção do div.style (por sugestão nem chegue a usar só em casos extremos mesmo) e prefira usar um div.class, assim sendo poderá fazer o tratamento de cada elemento usando media query de acordo com a resolução, assim ajustar seu layout como desejado.

recomendo a utilização do framework Bootstrap.

Todo o coding dos media query já são predefinidos em diversos tipos de classes!

>

4 horas atrás, Guilherme Luiz disse:

recomendo a utilização do framework Bootstrap.

Todo o coding dos media query já são predefinidos em diversos tipos de classes!

Então Guilherme. Eu realmente estou usando bootstrap. Mas não sei o que está acontecendo.

A estrutura do site está utilizando o bootstrap mas os elementos não estão responsivos. Você precisa checar os breakpoints do seu layout e ajustar manualmente os <inputs> para que fiquem no lugar. Usa @media queries para isso.

>

3 horas atrás, rikaschmitt disse:

 A estrutura do site está utilizando o bootstrap mas os elementos não estão responsivos. Você precisa checar os breakpoints do seu layout e ajustar manualmente os <inputs> para que fiquem no lugar. Usa @media queries para isso.

	Obrigado pela dica rikas, mas acho que esbarrei agora é na falta de conhecimento mesmo. Acho que não sei como implementar esta @media queries para resolver meu problema. mesmo assim vlw pela força.

>

13 horas atrás, alisonalves disse:

Obrigado pela dica rikas, mas acho que esbarrei agora é na falta de conhecimento mesmo. Acho que não sei como implementar esta @media queries para resolver meu problema. mesmo assim vlw pela força.

Beleza.

Mas usar @media queries é até simples.

Dá uma lida https://tableless.com.br/introducao-sobre-media-queries/  :D

Tente não colocar textos em imagens. Isso ajudará bastante.

Neste caso eu teria que colocar na @media queria que o formulário teria outro formato caso a resolução da tela seja outra? É isso?

>

19 minutos atrás, alisonalves disse:

Neste caso eu teria que colocar na @media queria que o formulário teria outro formato caso a resolução da tela seja outra? É isso?

Sim.

vai ajustando o formulário conforme a necessidade.. diminuir larguras, espaçamentos, etc.

Um exemplo mesmo que simples seria pedir muito? Só pra esclarecer mesmo, se possível. Obrigado

Fiz um exemplo bem simples: https://jsfiddle.net/02u6xnub/

Para visualizar o efeito, basta arrastar a caixa da visualização para aumentar ou diminuir a largura da mesma. No exemplo, quando a largura atingir 600px ou menos, as cores dos <inputs> irão mudar, etc.