CSS para Dispositivo Movel
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;
}Discussão (3)
Carregando comentários...