1

Eu tenho um formulário HTML e CSS que está perfeito no meu site, porem quando tento abri-lo em um dispositivo móvel (celular ou tablet) fica totalmente distorcido. Estou utilizando o Bootstrap como framework CSS.

Meu código:

.tudo-border-box {
		    box-sizing: border-box;
		}
		
		 
		.header-urna {
			border: solid;
		    background-color: #565656;
		    padding: 30px;
		    text-align: center;
		    font-size: 35px;
		    color: white;
		}
		 
		.nav-urna {
		    float: right;
		    width: 30%;
		    border: solid;
		    height: 400px; /* only for demonstration, should be removed */
		    background: #565656;
		    color: white;
		    padding: 20px;
		}
		

		.nav-urna ul {
		    list-style-type: none;
		    padding: 0;
		}
		
		.article-urna {
		    float: left;
		    padding: 20px;
		    /* border: solid; */
		    width: 70%;
		    background-color: #f1f1f1;
		    height: 400px; /* only for demonstration, should be removed */
		}
		 
		.section-urna:after {
		    content: "";
		    display: table;
		    clear: both;
		}
		 
		.footer-urna {
			border: solid;
		    background-color: #565656;
		    padding: 10px;
		    text-align: center;
		    color: white;
		}
		
		@media (max-width: 600px) {
		    .nav-urna, .article-urna {
		        width: 100%;
		        height: auto;
		    }
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="urnaDigital" class="form-control" style="border: solid;">
	        <header class="tudo-border-box header-urna">
	  			<h2 class="tudo-border-box">Urna Digital</h2>
			</header>
			
			<section class="tudo-border-box section-urna">
			
			<article class="tudo-border-box article-urna">
			    <h1 class="tudo-border-box">Digite o numero do seu candidato</h1>
			    <!-- Aqui vao dois quadrados, um para cada numero, depois que digitado os dois numeros, busco o candidato, caso não existir o numero na base de dados pergunto se o usuario quer anular voto, caso existir, dou a opção de confirmar ou corrigir, caso for clicado o botão branco entao vou pra tela de confirmar ou corrigir, e caso clicar no corrigir, limpo os dois campos de numeros.
			    <br>			    
			    Um ajuste que tenho que fazer, é para celular, botoes de numero ficam  zuados.
			    <br>
			    alem de ver uns erros do console f12 -->
			    
			    <div id="numerosCandidato" class="row" style="height:280px;">
			    	<div class="col-sm-2">
			    	</div>
			    	<div class="col-sm-2">
			    	</div>
			    	<div class="col-sm-2" id="digito1" style="border:solid; font-size: 170px;">
 				    </div>
 					<div class="col-sm-1">
			    	</div>
				    <div class="col-sm-2" id="digito2" style="border:solid; font-size: 170px;">
 			    	</div>
			    	<div class="col-sm-2">
			    	</div>
			    	<div class="col-sm-1">
			    	</div>
			    </div>
			    
			  </article>
			
			  <nav class="tudo-border-box nav-urna">
			     
			      <div class="row">
		          <!--  <div class="btn-group"> -->
		           <div class="col-sm-4" >
					  <button type="button" id="btn1" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">1</button>
					 </div>
					  <div class="col-sm-4" >
					  <button type="button"  id="btn2" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">2</button>
					 </div>
					  <div class="col-sm-4" >
					  <button type="button" id="btn3"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">3</button>
					 </div>
					<!-- </div>  -->
				</div> 	
				
				<br>
				
				<div class="row">	
					<div class="col-sm-4" >
					  <button type="button"  id="btn4" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">4</button>
					 </div>
					  <div class="col-sm-4" >
					  <button type="button"  id="btn5" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">5</button>
					 </div>
					  <div class="col-sm-4" >
					  <button type="button" id="btn6"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">6</button>
					 </div>
					 
				</div> 	
				
				<br>
				
				<div class="row">	 
					<div class="col-sm-4" >
					  <button type="button" id="btn7"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">7</button>
					 </div>
					  <div class="col-sm-4" >
					  <button type="button" id="btn8"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">8</button>
					 </div>
					  <div class="col-sm-4" >
					  <button type="button"  id="btn9" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">9</button>
					 </div>
					 
				</div> 
				
				<br>
				
				<div class="row">	
					<div class="col-sm-4" >
 					 </div>
					  <div class="col-sm-4" >
					  <button type="button"  id="btn0" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">0</button>
					 </div>
					  <div class="col-sm-4" >
 					 </div>
				</div>
				
				<div class="row">	
					<br>
				</div>
				
				<div class="row">	
					<div class="btn-group">
					 
					  <button type="button" class="btn btn-default "  id="btnBranco" >BRANCO</button>
					    
					  <button type="button" class="btn btn-warning "  id="btnCorrige"  style="background-color: #fb3f14; border-color: #fb3f14;">CORRIGE</button>
					   
					  <button type="button" class="btn btn-success "  id="btnConfirma" >CONFIRMA</button>
					 
					</div> 
				</div>
				     
			  </nav>
			  
			  
			</section>
			
			<footer class="tudo-border-box footer-urna">
			  <p class="tudo-border-box">
			    Esse simulador funciona da mesma forma que uma urna eletronica,
			     você digita o numero de seu candidato a presidencia e pressionar Confirma.
			     Caso digitou o numero errado clique em Corrige.
			     Caso desejar votar em branco, clique em Branco.
			     </p>
			</footer> 
		</div>

1
  • 1
    Cara, tu pode fazer o seguinte... Usar bootstrap, feito responderam, mas também tu pode usar ao invés de pixels com medida tu pode usar medidas relativas, feito: % vw, vh... Da uma olhada desenvolvimentoparaweb.com/css/… 30/08/2018 às 6:09

2 Respostas 2

1

Cara basicamente vc tem que trocar a col- dos btns de col-md-4 para col-xs-4 pois usando XS vc garante que as colunas vão continuar divididas da forma correta até em telas pequenas, sem colocar um btn em cada linha como está acontecendo no seu código.

Veja o exemplo abaixo para visualizar como fica.

 .tudo-border-box {
		    box-sizing: border-box;
		}
		
		 
		.header-urna {
			border: solid;
		    background-color: #565656;
		    padding: 30px;
		    text-align: center;
		    font-size: 35px;
		    color: white;
		}
		 
		.nav-urna {
		    float: right;
		    width: 30%;
		    border: solid;
		    height: 400px; /* only for demonstration, should be removed */
		    background: #565656;
		    color: white;
		    padding: 20px;
		}
		

		.nav-urna ul {
		    list-style-type: none;
		    padding: 0;
		}
		
		.article-urna {
		    float: left;
		    padding: 20px;
		    /* border: solid; */
		    width: 70%;
		    background-color: #f1f1f1;
		    height: 400px; /* only for demonstration, should be removed */
		}
		 
		.section-urna:after {
		    content: "";
		    display: table;
		    clear: both;
		}
		 
		.footer-urna {
			border: solid;
		    background-color: #565656;
		    padding: 10px;
		    text-align: center;
		    color: white;
		}
		
		@media (max-width: 600px) {
		    .nav-urna, .article-urna {
		        width: 100%;
		        height: auto;
		    }
		}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />    

    <div id="urnaDigital" class="form-control" style="border: solid;">
        <header class="tudo-border-box header-urna">
        <h2 class="tudo-border-box">Urna Digital</h2>
    </header>
    
    <section class="tudo-border-box section-urna">
    
    <article class="tudo-border-box article-urna">
        <h1 class="tudo-border-box">Digite o numero do seu candidato</h1>
        <!-- Aqui vao dois quadrados, um para cada numero, depois que digitado os dois numeros, busco o candidato, caso não existir o numero na base de dados pergunto se o usuario quer anular voto, caso existir, dou a opção de confirmar ou corrigir, caso for clicado o botão branco entao vou pra tela de confirmar ou corrigir, e caso clicar no corrigir, limpo os dois campos de numeros.
        <br>			    
        Um ajuste que tenho que fazer, é para celular, botoes de numero ficam  zuados.
        <br>
        alem de ver uns erros do console f12 -->
        
        <div id="numerosCandidato" class="row" style="height:280px;">
          <div class="col-sm-2">
          </div>
          <div class="col-sm-2">
          </div>
          <div class="col-sm-2" id="digito1" style="border:solid; font-size: 170px;">
           </div>
         <div class="col-sm-1">
          </div>
          <div class="col-sm-2" id="digito2" style="border:solid; font-size: 170px;">
           </div>
          <div class="col-sm-2">
          </div>
          <div class="col-sm-1">
          </div>
        </div>
        
      </article>
    
      <nav class="tudo-border-box nav-urna">
         
          <div class="row">
            <!--  <div class="btn-group"> -->
             <div class="col-xs-4" >
          <button type="button" id="btn1" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">1</button>
         </div>
          <div class="col-xs-4" >
          <button type="button"  id="btn2" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">2</button>
         </div>
          <div class="col-xs-4" >
          <button type="button" id="btn3"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">3</button>
         </div>
        <!-- </div>  -->
      </div> 	
      
      <br>
      
      <div class="row">	
        <div class="col-xs-4" >
          <button type="button"  id="btn4" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">4</button>
         </div>
          <div class="col-xs-4" >
          <button type="button"  id="btn5" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">5</button>
         </div>
          <div class="col-xs-4" >
          <button type="button" id="btn6"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">6</button>
         </div>
         
      </div> 	
      
      <br>
      
      <div class="row">	 
        <div class="col-xs-4" >
          <button type="button" id="btn7"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">7</button>
         </div>
          <div class="col-xs-4" >
          <button type="button" id="btn8"  class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">8</button>
         </div>
          <div class="col-xs-4" >
          <button type="button"  id="btn9" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">9</button>
         </div>
         
      </div> 
      
      <br>
      
      <div class="row">	
        <div class="col-sm-4" >
          </div>
          <div class="col-sm-4" >
          <button type="button"  id="btn0" class="btn btn-primary btn-lg" style=" background-color: black; border-color: black;">0</button>
         </div>
          <div class="col-sm-4" >
          </div>
      </div>
      
      <div class="row">	
        <br>
      </div>
      
      <div class="row">	
        <div class="btn-group">
         
          <button type="button" class="btn btn-default "  id="btnBranco" >BRANCO</button>
            
          <button type="button" class="btn btn-warning "  id="btnCorrige"  style="background-color: #fb3f14; border-color: #fb3f14;">CORRIGE</button>
           
          <button type="button" class="btn btn-success "  id="btnConfirma" >CONFIRMA</button>
         
        </div> 
      </div>
           
      </nav>
      
      
    </section>
    
    <footer class="tudo-border-box footer-urna">
      <p class="tudo-border-box">
        Esse simulador funciona da mesma forma que uma urna eletronica,
         você digita o numero de seu candidato a presidencia e pressionar Confirma.
         Caso digitou o numero errado clique em Corrige.
         Caso desejar votar em branco, clique em Branco.
         </p>
    </footer> 
  </div>

OBS: Independente disso vc ainda precisa fazer uns ajustes de CSS tipo no btn-group

2
  • Valeu ai pela ajuda mano, era exatamente oque precisava deixar os botões lado a lado e funcionou perfeitamente! 30/08/2018 às 3:43
  • 1
    @sergioBertolazzo tranquilo jovem tmj! Sucesso com o projeto ai
    – hugocsl
    30/08/2018 às 10:26
1

Amigo, a tag col-sm é para dispositivos moveis ate ai tudo bem, mas você cria seu html totalmente encima dela, você deveria usar as tags de responsividade para cada tamanho de tela, por exemplo, quando o dispositivo é desktop ele ira abrir a tela toda, quando ele estiver em um telefone, usar a área de input embaixo ou encima da tela, no caso seu código somente usa um tamanho único pra todas as telas.

Recomendo ler este artigo.

2
  • valeu pelas dicas mano!! 30/08/2018 às 3:43
  • Que isso cara, estamos todos aqui pra isso :D 31/08/2018 às 23:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .