Jump to content
alisonalves

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

Recommended Posts

Olá pessoal. Criei um simples formulário de login em uma página. Quando acesso em outros dispositivos como smatphones o formulário não se ajusta perfeitamente e acaba se sobrepondo à uma imagem que tem logo abaixo. Alguém pode me dar uma orientação onde estou errando? Segue o link aqui

 

Valeu

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By unset
      Olá, estou com uma falha de lógica pegando aqui se alguém puder ajudar
       
      Eu tenho um formulário tranquilo, como abaixo
      <label for="cidades" class="form-label">Cidades</label> <select class="form-select mb-3" name="cidades[]" id="cidades" multiple="multiple"> <option value="1">Cidade 1</option> <option value="2">Cidade 2</option> <option value="3">Cidade 3</option> <option value="4">Cidade 4</option> <option value="5">Cidade 5</option> </select>  
      Blz eu recebe os dados do formulário ou seja os ids da cidade certinho em um array 
       
      array(3) { [0]=> string(1) "2" [1]=> string(2) "3" [1]=> string(1) "5" }
      <?php $dados = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRIPPED); var_dump($dados); ?> Agora como inserir todos os ids no banco? utilizando um for? um while? algum exemplo?
       
      Pergunto pq ao tentar inserir no banco somente um registro é inserido e não todos do select
       
    • By mateus.andriollo
      Qual seria a forma correta de projetar uma aplicação multi formulários. Estou fazendo ela em Jquery com Load() mas algumas ações não são executadas em script.
      Me pergunto seria o correto?
       
      Exemplo: pensando um cadastro de clientes/empresas
      - clientes.php (formulário de cadastro/edição/anexos)
      - empresas.php (formulários de cadastro de empresa/ funcionários/ setores)
      - relatorios.php (clientes e empresas)
       
      Cada página dessa eu chamo, ela vem sempre com o seu conteúdo...
      Pensei no seguinte, todos estea formulários carregados e eu apenas usar função Get() para preencher campos e gerar os relatórios.
       
      Fica a dúvida, pois hj essas páginas extras são HTML com form e ações PHP
       
       
       
       
       
    • By 4Unknow
      Boa noite comunidade da Imasters, como vocês estão?

      Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro.
      Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro.

      Quem puder me ajudar, ficaria agradecido.

      segue código:

      index.html:
       
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
      script.js:
       
      $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); });
      style.css:
       
      @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões.
      Puderem me ajudar agradeço.

      Um abraço.
    • By rafaelti
      Pessoal, tudo bem?
       
      Estou desenvolvendo um pequeno serviço gratuito para integrar formulários HTML com o Microsoft Teams. Gostaria de saber se esta ferramenta é útil para vocês, e também se teriam alguma sugestão de melhoria?
      Pretendo adicionar outros serviços futuramente, como Slack e Facebook Messenger.
       
      Segue o link:
      https://dockform.net
       
      Att,
      Rafael
    • By kaioneresm
      Olá, tenho um formulario que pede um nome de usuário.
      Preciso que ao tentar digitar o espaço do teclado ele não funcione. Ou seja o input text bloquea no mesmo momento que for digiado.
       
      Alguem pode me ajudar? Obrigado !!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.