CSS para Dispositivo Movel

[ronanxllr 0]

Ola galera estou com muita dificuldade de fazer o css do meu site para dispositivo movel, o site no pc esta ok (nao 100% kkkkk) mas ta tranquilo e favoravel, gostaria de muita ajuda de voces, segue o link abaixo do meu site pfv abrem no celular, automaticamente ele ira para o index de mobile.

 

Voces perceberam que a barra de buscar estar pequena, quero que essa barra fique legal, igual a do youtube no dispositivo movel.

 

Site > www.loocalize.com

 

Segue abaixo o CSS

@charset "iso-8859-1,utf-8"

*{margin:0; padding:0;}

body, html{
    width:90%;
    margin:auto;
    min-width:600px;
    max-width:2000px;
	}
body{
    background-color: #F8F8F8;

}

#q{
	position:absolute;
	left:200px;
	top:15px;
	background-image: url("imagens/botao-mobile.png");
	border-bottom: 1px solid #FF5050;
    border-top: 1px solid #FF5050;
    border-left: 0px solid #FF5050;
    border-right: 1px solid #FF5050;
   background-color:transparent;
	width:23px; 
	height:24px;
	cursor:pointer;
	margin: auto;
	
}

#Layer1{
    background-color: #FF5050;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #DFE0E4;
	position:fixed;
	text-align:left;
	left:0;
	top:0;
	right:0;
	height:55px;
	z-index:2
}

#img_logo{
	position:absolute;
	margin-top:7px;
	margin-left:7px;
	width:30px; 
	height:40px;
}

div#formulario h2{
	font:18px "Calibri", sans-serif;
	color:#4185FA;
	font-weight:bold;
	width:100%;
	margin-bottom:10px;
}
div#formulario input[type=text]{
	position:absolute;
	left:50px;
	top:15px;
	height:28px;
	border-bottom:1px solid #DFE0E4;
	background:transparent;
	outline:none;
	font:15px tahoma, arial;
	color:#fff;
	min-width:150px;
	max-width:414px;
}
div#formulario input[type=text]:focus{border-bottom-color:#E54848;}

div#resultado{
    float: left;
	;
	margin-top:60px;
}
div#resultado p#res{
	font:16px "Trebuchet MS", tahoma, arial;
	color:#404040;
	padding:20px;
	width:400px;
	margin-top:-50px;
}
div#resultado ul{float:center; list-style-type:none;}
div#resultado ul li{
	padding-top:15px;
    padding-left:15px;
    padding-right: 15px;
	background:#FFF;
	min-width:185px;
	max-width:667px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:5px;
	border-bottom:1px solid #DFE0E4;
	border-top:1px solid #DFE0E4;
	border-left:1px solid #DFE0E4;
	border-right:1px solid #DFE0E4;
}

div#resultado ul li span{
	font:14px "Calibri";
	color:#404040;
	font-weight:bold;
}

div#resultado ul li:hover{background:#FFF9F9;}
div#resultado ul li p{
	font:9px "Arial"; 
    color:#404040;
    padding-top:18px;
}

[L. Henrique 179]

Essa dúvida de responsivo já está virando um mantra aqui no Fórum. De 10 perguntas, 7 são sobre responsivo. haushuahusahusuhsasa

Mas vamos lá. Pra você que quer deixar o seu menu responsivo (sim, esse é o termo), precisa trabalhar com Media Queries. Elas são responsáveis por definir um tipo de estilo para um tamanho de tela desejado.

Ex.:

@media screen and (max-width: 750px){
   .sua-classe {
      ...
   }
}

Aqui ele está dizendo o seguinte: A .sua-classe terá as propriedades definidas ENQUANTO a página não ultrapassar 750px de largura.

No momento estou sem muito tempo pra buscar links, mas você deve procurar por: Site responsivo e/ou media queries.

[PetrusHenrique 5]

Como o amigo L. Henrique comentou. Foque em media queries, assim você estiliza o mesmo código para celular e para tablet.

[pedropgomes 4]

segue um link que te ajuda nisso, lá no final fala das media queries: http://pt-br.learnlayout.com/