Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Bom dia!
       
      A questão é a seguinte, tenho o seguinte form 
       
      <form onsubmit="return false;" action="./busca.php" method="post" name="buscar" id="buscar">
       
                 <input type="text" name="texto">
       
                <button>Executa</button>
       
      </form>
       
      Que está funcionando perfeitamente com a seguinte estrutura do script abaixo
       
        var form = document.getElementById('buscar');
       
        form.addEventListener('submit', function(e)
        {
            e.preventDefault();
       });
       
       
      O que preciso, é saber como submeter esse mesmo formulário ao clicar em button fora do form sem modificar esse script?
       
      <button id="fora_do_form">Submeter o form</button>
       
       
      Agradeço desde já!
       
       
    • Por Kisha
      Estou procurando um programador web para desenvolver um site front responsivo, de preferência pessoas com referências e trabalhos já feitos.
       
      Contato via discord: quando eu tinha uma glock#5547
    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardodsilvaq
      Erro retornado no console do navegador: 400 bad request
      Rastreei o erro ate essa parte no arquivo admin-ajax.php mudando o valor de resposta de 0 para 1:
      if ( is_user_logged_in() ) { // If no action is registered, return a Bad Request response. if ( ! has_action( "wp_ajax_{$action}" ) ) { wp_die( '0', 400 ); } Tentei de tudo, mas infelizmente nao entendi oq realmente significa esse login e como ele funciona.
      Vi algumas pessoas tendo problema com o host, no meu caso estou usando hostinger. (Nao creio que isso e relevante mas ta ai.)
       
      Código utilizado:
       
      Javascript
      function formValidation() { event.preventDefault(); var name = document.forms["contactForm"]["name"].value; var email = document.forms["contactForm"]["email"].value; var subject = document.forms["contactForm"]["subject"].value; var message = document.forms["contactForm"]["message"].value; document.getElementById('status').innerHTML = ''; var errorMessage="<span class='error'>All fields are required.</span>"; var regEx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") { document.getElementById('status').innerHTML = errorMessage; return false; } if (!regEx.test(email)) { var errorMessage="<span class='error'>Invalid email.</span>"; document.getElementById('status').innerHTML = errorMessage; return false; } processContactSubmit(); return true; } function processContactSubmit() { var request = new XMLHttpRequest(); request.open("POST", "/wp-admin/admin-ajax.php?action=process_contact_form"); request.onreadystatechange = function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("status").innerHTML = this.responseText; } }; var myForm = document.getElementById("contactForm"); var formData = new FormData(contactForm); request.send(formData); } functions.php
      add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form'); add_action('wp_ajax_process_contact_form', 'process_contact_form'); //Retirar essa parte para error no console, no contrario ira aparecer no navegador o numero 0. function process_contact_form() { $to = "Recipient Email Address"; $subject = $_POST["subject"]; $headers = "Testing"; $message = $_POST["message"]; $attachments = ""; $sent = wp_mail($to, $subject, $message, $headers, $attachments); if (! $sent) { echo "<span class='error'>Problem in sending mail.</span>"; } else { echo "<span class='success'>Hi, thank you for the message.</span>"; } wp_die(); } Html
      <form name="contactForm" id="contactForm" method="post" onsubmit="return formValidation()" action=""> <p class="comment-form-comment"><textarea id="message" name="message" required="" placeholder="" aria-required="true"></textarea></p> <p class="comment-form-author"><label for="author">Nome: </label> <input id="name" name="name" required="" size="30" type="text" value=" " /></p> <p class="comment-form-author about"><label for="author">Assunto: </label> <input id="subject" name="subject" required="" size="40" type="text" value=" " /></p> <p class="comment-form-email"><label for="email">Email: </label> <input id="email" name="email" required="" size="30" type="text" value="" /></p> <p class="form-submit"><input id="submit" class="submit" name="email_contato" type="submit" value="Enviar" /></p> </form>&nbsp; <h3><div id="status"></div></h3>  
    • Por 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
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.