Site responsivo com css
Olá amigos , queria saber oque fiz de errado ao criar um site responsivo usando o método em css , com o media screen, quando olho pelo navegador o site criado que eu usei este comando esta tudo certo , sabe quando eu arrumo o tamanho da janela do navegador , mas quando acesso pelo celular , deveria também ficar igual ao navegador do computador , mas não fica com aparencia de Desktop . o código que usei é este :
h3{
color: white;
display: none;
}
h4{
color: white;
font-family: tahoma;
}
#image{
background-color: rgba(10,10,10,0.7);
width: 800px;
height: 500px;
position: relative;
}
#img{
position: relative;
max-width: 200px;
max-height: 259px;
}
h1{
color: white;
font-family: tahoma;
}
.animal{
position: absolute;
}
.animal span{
color: red;
font-family: arial;
font-size: 20px;
}
#adotar{
color: white;
}
@media screen and (min-width: 660px)and (max-width: 810px){
#image{
background-color: rgba(10,10,10,0.7);
width: 650px;
height: 500px;
position: relative;
}
#img{
position: relative;
max-width: 200px;
max-height: 259px;
}
h3{
color: white;
display: none;
}
.animal span{
color: red;
font-family: arial;
font-size: 17px; }
h1{
font-size: 20px;
}
h4{
color: white;
font-family: tahoma;
}
#adotar{
color: white;
}
}
@media screen and (min-width: 500px)and (max-width: 660px){
#image{
background-color: rgba(10,10,10,0.7);
width: 400px;
height: 500px;
position: relative;
}
#img{
position: relative;
max-width: 200px;
max-height: 259px;
}
h4{
color: white;
font-family: tahoma;
}
.animal span{
color: red;
font-family: arial;
font-size: 17px;
display: none
}
h1{
font-size: 20px;
display: none
}
h3{
color: white;
display: block;
font-family: tahoma;
}
#animal2 span{
color: red;
font-family: arial;
font-size: 17px;
display: block, inline;
}
#adotar{
color: white;
}
}
@media screen and (min-width: 315px)and (max-width: 500px){
#image{
background-color: rgba(10,10,10,0.7);
width: 300px;
height: 700px;
position: relative;
}
h4{
color: white;
font-family: tahoma;
}
#img{
position: relative;
max-width: 200px;
max-height: 259px;
}
.animal span{
color: red;
font-family: arial;
font-size: 17px;
display: none
}
h1{
font-size: 20px;
display: none
}
h3{
color: white;
display: block;
font-family: tahoma;
}
#animal2 span{
color: red;
font-family: arial;
font-size: 17px;
display: block, inline;
}
#img{
width: 250px;
max-height: 259px;
}
#adotar{
color: white;
}
}
@media screen and (min-width: 50px)and (max-width: 315px){
#image{
background-color: rgba(10,10,10,0.7);
width: 250px;
height: 700px;
position: relative;
}
h4{
color: white;
font-family: tahoma;
}
#img{
position: relative;
max-width: 200px;
max-height: 259px;
}
.animal span{
color: red;
font-family: arial;
font-size: 17px;
display: none
}
h1{
font-size: 20px;
display: none
}
h3{
color: white;
display: block;
font-family: tahoma;
}
#animal2 span{
color: red;
font-family: arial;
font-size: 17px;
display: block, inline;
}
#img{
width: 220px;
}
#adotar{
color: white;
}
}
Html
<body background="../images/fundo.jpg">
<center>
<div id="image">
<br/><br/>
<div class="animal">
<h1>  Nome: <span><?php echo $nome; ?></span><br/><br/>
  Sexo: <span><?php echo $sexo; ?></span><br/><br/>
  Idade: <span><?php echo $idade; ?></span><br/><br/>
Id: <span><?php echo $id; ?></span><br/><br/>
  Porte: <span><?php echo $porte; ?></span> <h1>
</div>
<center>
<img id="img" src="<?php echo $image;?>"/><br/>
<a href="" id="adotar" onClick="window.open('https://www.cognitoforms.com/GRAPA1/FICHADECADASTRODEADOÇÃO','Janela','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=600,left=300,top=10'); return false;">Adotar</a>
<br/>
<h4>Compartilhe e Diga para seus amigos <br/>que a(o) <?php echo $nome; ?> esta para a adoção.</h4>
<iframe src="https://www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Fgrapaprotetores.org%2Ffoto%2F<?php echo $compartilhar;?>&layout=button&size=small&mobile_iframe=true&appId=1170750259714223&width=97&height=20" width="97" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</center>
<div id="animal2">
<h3>Nome: <span><?php echo $nome?></span><br/>     Idade: <span><?php echo $idade; ?></span>
Sexo: <span><?php echo $sexo; ?></span><br/>     Id: <span><?php echo $id; ?></span>
Porte: <span><?php echo $porte; ?></span>
</h3>
</div>
</div>
</center>
</body>
</html>
Link da página que estou com Problema: [http://grapaprotetores.org/foto/neguinha.php](http://grapaprotetores.org/foto/neguinha.php)Discussão (2)
Carregando comentários...