To tendo dificuldades com responsividade, eu quero saber porque eu não to conseguindo adaptar meu site pra essa resolução de 720x1280, teoricamente meu site deveria se encaixar bem em modo paisagem nesses celulares pois eu fiz ele em 1000px, e nessa outra resolução de 720 eu já fiz a responsividade usando a media query "@media screen and (max-width: 720px)", mas não tá dando certo. Já fiz a responsividade pra 480px também e nada do layout se encaixar em 720px. O que tá acontecendo?
Obs: eu não usei mobile first, eu sei que é melhor.
Como eu to fazendo isso pela primeira vez talvez eu esteja fazendo alguma besteira, eu vou explicar pra vocês como eu estou fazendo a responsividade, eu to começando em 854px e to indo até 320px, to fazendo uma media query embaixo da outra:
@media screen and (max-width: 854px)
{
css...
}
@media screen and (max-width: 800px)
{
css...
}
@media screen and (max-width: 720px)
{
css...
}
...
@media screen and (max-width: 320px)
{
css...
}
Eu to fazendo assim meio por intuição mesmo pois no computador, redimensionando o navegador, tá tudo funcionando, no entanto nos celulares não.
Edição: Acrescentando os códigos.
style.css (css principal)
body
{
background:#356033;
padding:0;
margin:0;
}
.container
{
width:1000px;
padding:0;
margin:auto;
}
/* CABEÇALHO */
header #logo
{
margin: 34px 27px 35px 27px;
float:left;
}
header #livros
{
float:left;
margin-top:20px;
}
header #pesquisar
{
width:268px;
height:27px;
border-radius:5px;
font:22px Trebuchet;
border:none;
margin:10px 0 0 10px;
}
header #lupa
{
margin:8px 0 0 10px;
float:left;
}
header .menu_nav
{
background:#B35900;
width:47px;
height:47px;
border-radius:7px;
float:right;
border:1px solid #FFFFFF;
margin-top:35px;
padding:0 0 8px 4.5px;
display:none;
}
header .grade
{
height:4px;
width:36px;
margin-top:8px;
background:#FFFFFF;
}
header .pesquisa
{
background: linear-gradient(#B7620D, #B35900);
width:338px;
height:47px;
border:1px solid #FFFFFF;
border-radius:7px;
margin:35px 8px;
float:right;
}
.clear
{
clear:both;
}
header nav
{
background: linear-gradient(#B7620D, #B35900);
width:984px;
height:57px;
border-radius:7px;
margin-left:8px;
}
header nav ul li
{
float:left;
font:28px Trajan Pro;
color:#FFFFFF;
padding:13px 34px 7px 30px;
border-radius:7px;
border-bottom:none;
}
header #final_list
{
width:211px;
}
header nav ul
{
margin:0;
padding:0;
list-style:none;
}
header .divisor
{
width:3px;
height:31px;
background:#FFFFFF;
float:left;
margin-top:12px;
}
header a
{
float:left;
color:#FFFFFF;
}
header a:hover
{
text-decoration:none;
color:#FFFFFF;
}
header ul li:hover
{
background: linear-gradient(#CD6C0C, #B6610B);
}
/* PÁGINA HOME */
.categorias
{
background: linear-gradient(#B7620D, #B35900);
width:248px;
border-radius:7px;
margin:30px 15px 8px 8px;
padding-bottom:15px;
float:left;
}
.categorias h1
{
border-bottom:3px solid #FFFFFF;
font:28px Trajan Pro;
color:#FFFFFF;
margin:10px 0 0 10px;
width:227px;
text-transform:uppercase;
}
.categorias a
{
display:inline-block;
border-bottom:1px dotted #FFFFFF;
width:218px;
text-decoration:none;
color:#FFFFFF;
padding-top:20px;
}
.categorias a:hover
{
background: linear-gradient(#CD6C0C, #B6610B);
}
.categorias nav
{
float:left;
}
.categorias ul
{
list-style:none;
padding:0;
}
.categorias ul li
{
font:25px Trajan Pro;
color:#FFFFFF;
width:238px;
margin-left:10px;
}
#page_livros .categorias
{
margin-bottom:15px;
}
.banner_desenhos
{
width:716px;
background:#FFFFFF;
float:right;
margin-top:30px;
margin-right:8px;
padding:30px 0 0 30px;
text-align:center;
}
.banner_desenhos span
{
cursor:pointer;
font-size:50px;
color:#CCC;
float:left;
margin-right:6px;
}
.banner_desenhos span.cycle-pager-active
{
color: #D69746;
}
.banner_desenhos .exemple-pager
{
text-align:center;
}
#baquetas
{
float:left;
margin:35px 5px 10px 0;
}
.baquetas_livros
{
clear:both;
}
.livros
{
width:716px;
height:1130px;
background:#FFFFFF;
float:right;
margin:-10px 8px 8px 0;
padding-bottom:20px;
font:20px Trebuchet MS;
text-align:center;
position:relative;
}
.livros figcaption
{
width:132px;
height:50px;
}
.livros h1
{
padding:23px 35px 23px 35px;
background:#356033;
margin:10px 0 10px 36px;
width:638px;
color:#FFFFFF;
font:30px Trajan Pro;
}
.livros h2
{
text-align:center;
}
.livros h2
{
text-align:center;
}
.livros #grade_livros
{
width:638px;
height:6px;
background:#356033;
float:left;
margin-left:35px;
}
.livros ul
{
width:674px;
float:left;
margin:10px 0 0 0;
padding:0;
list-style:none;
}
.livros ul li
{
display:inline-block;
float:left;
vertical-align:top;
padding:30px 0 6px 36px;
}
.livros ul li a
{
color:#333333;
text-decoration:none;
}
.livros ul li figure
{
transition: 0.7s ease-out;
}
.livros ul li figure:hover
{
transform: scale(1.1);
transition: 0.7s ease-in;
}
#page_livros .livros
{
margin-top:30px;
padding-bottom:15px;
}
.page
{
position:absolute;
bottom:20px;
width:716px;
}
.page a
{
text-decoration:none;
color:#FFFFFF;
background:#4F8D4B;
border-radius:2px;
padding:5px;
margin-right:10px;
}
.meio
{
font:20px Trebuchet MS;
background:#356033;
border-radius:2px;
color:#FFFFFF;
margin:60px 10px 0 0;
display:inline;
padding:5px;
}
.pilha_livros
{
margin:70px 0 0 5px;
}
.sobre p
{
font:30px Trebuchet MS;
color:#FFFFFF;
margin:50px 0 50px 8px;
}
.sobre img
{
margin-right:8px;
}
.alignright
{
float:right;
margin:0 8px 10px 10px;
border:2px solid #B6610B;
}
.alignleft
{
float:left;
margin:0 10px 10px 0;
border:2px solid #B6610B;
}
.descricao_livro
{
margin-left:10px;
}
.descricao_livro figure
{
float:right;
margin:23px 0 10px 10px;
}
.descricao_livro figcaption
{
margin-left:57px;
}
.descricao_livro #download
{
color:#FFFFFF;
font:23px Arial;
}
.descricao_livro h3
{
margin-left:10px;
color:#FFFFFF;
}
.descricao_livro h1
{
margin:30px 0 0 0;
color:#FFFFFF;
}
.descricao_livro h2
{
text-align:center;
}
.descricao_livro img
{
border:3px solid #B35900;
}
/*PÁGINA BATERISTAS*/
.bateristas
{
width:984px;
margin:30px 0 0 8px;
}
.bateristas iframe
{
width:300px;
height:200px;
}
.bateristas ul
{
display:inline-block;
margin:0 0 0 23px;
width:940px;
padding:0;
list-style:none;
}
.bateristas ul li
{
float:left;
padding:0 0 0 10px;
margin:10px 0 0 0;
}
.bateristas ul li iframe
{
border:3px solid #B35900;
}
.ordem
{
width:100%;
background:#FFFFFF;
float:left;
margin:20px 0 20px 0;
border:6px solid #CCC;
padding:20px 0 20px 0;
}
.ordem span
{
font:23px Trebuchet MS;
border-radius:2px;
padding:5px;
background:#4F8D4B;
margin:-10px 0 0 5px;
float:left;
color:#FFFFFF;
}
#alfabeto
{
width:984px;
float:left;
padding-bottom:20px;
margin:30px 0 0 8px;
background:#FFFFFF;
}
#alfabeto span
{
font:23px Trebuchet MS;
border-radius:2px;
padding:5px;
background:#4F8D4B;
margin:20px 5px 0 0;
float:left;
color:#FFFFFF;
}
#alfabeto span a
{
text-decoration:none;
color:#FFFFFF;
}
#alfabeto #sub
{
margin-left:132px;
float:left;
}
/*PÁGINA DESENHOS*/
.desenhos
{
width:984px;
border:5px solid #CCC;
background:#FFFFFF;
margin:30px 0 20px 8px;
padding:20px 0 20px 0;
}
.desenhos ul
{
margin:0 0 0 27px;
display:inline-block;
width:100%;
padding:0;
list-style:none;
}
.desenhos ul li
{
vertical-align:top;
padding:10px 0 0 5px;
margin:0;
float:left;
}
.desenhos ul li img
{
border:3px solid #B35900;
transition: 0.7s ease-out;
}
.desenhos ul li img:hover
{
transform: scale(1.1);
transition: 0.7s ease-in;
}
/* PÁGINA CONTATO */
.contato
{
width:984px;
font:23px Trebuchet MS;
color:#FFFFFF;
margin:30px 0 20px 8px;
background:#FFFFFF;
border:6px solid #CCC;
float:left;
}
.contato form
{
width:400px;
margin:8px 0 10px 8px;
background:#356033;
padding:20px 0 40px 0;
float:left;
}
.contato img
{
float:left;
margin-top:40px;
margin-right:20px;
}
.contato input
{
width:350px;
background:#B35900;
color:#FFFFFF;
margin-left:25px;
font:19px Trebuchet MS;
}
#redes
{
width:525px;
height:664px;
background:#356033;
float:left;
padding:20px 0 10px 0;
margin:8px 0 0 30px;
}
#redes p
{
font:23px Trajan Pro;
color:#FFFFFF;
text-align:center;
border-bottom:6px solid #FFFFFF;
margin:0 0 20px 0;
padding-bottom:10px;
}
#redes h1
{
clear:both;
}
#redes h3
{
clear:both;
}
#face
{
margin-left:167px
}
.contato #aviso
{
font:12px arial;
margin-left:25px;
display:none;
font-weight:bold;
}
.contato label
{
margin-left:25px;
}
.contato textarea
{
width:350px;
background:#B35900;
color:#FFFFFF;
margin-left:25px;
font:19px Trebuchet MS;
}
.contato h1
{
font:23px Trajan Pro;
color:#FFFFFF;
text-align:center;
border-bottom:6px solid #FFFFFF;
margin:0 0 20px 0;
padding-bottom:10px;
}
.contato_btn
{
font:23px Trebuchet MS;
color:#FFFFFF;
margin-left:50px;
background:#B35900;
}
/*PÁGINA DE PESQUISA*/
.search #resultado
{
width:984px;
margin: 20px 0 20px 8px;
background:#FFFFFF;
border:6px solid #CCC;
min-height:260px;
padding:10px 10px 60px 10px;
}
.search #resultado:hover
{
background:#B5D7B3;
}
.search #mensagem
{
text-align:center;
font:35px Tranjan Pro;
color:#FFFFFF;
}
.search h1
{
text-align:center;
font:35px Tranjan Pro;
color:#575748;
}
.link_search
{
text-decoration:none;
color:#575748;
}
.link_search:hover
{
text-decoration:none;
color:#575748;
}
.search #paginas
{
width:984px;
margin: 20px 0 20px 8px;
background:#FFFFFF;
border:6px solid #CCC;
padding:20px 0 20px 5px;
}
#primeira_search a
{
text-decoration:none;
font:20px Trebuchet MS;
margin-right:10px;
border-radius:2px;
padding:5px;
color:#FFFFFF;
margin-top:10px;
background:#4F8D4B;
}
#meio_search
{
font:20px Trebuchet MS;
background:#356033;
border-radius:2px;
color:#FFFFFF;
padding:5px;
margin-right:10px;
}
.lados_search a
{
text-decoration:none;
font:20px Trebuchet MS;
margin-right:10px;
border-radius:2px;
padding:5px;
color:#FFFFFF;
margin-top:10px;
background:#4F8D4B;
}
#ultima_search a
{
text-decoration:none;
font:20px Trebuchet MS;
margin-right:10px;
border-radius:2px;
padding:5px;
color:#FFFFFF;
margin-top:10px;
background:#4F8D4B;
}
/* PÁGINA ENVIADO */
.enviado
{
width:984px;
margin:60px 0 60px 8px;
}
.enviado h1
{
font:28px Trajan Pro;
text-align:center;
color:#FFFFFF;
}
.enviado h3
{
font:26px Trajan Pro;
text-align:center;
color:#FFFFFF;
}
/*RODAPÉ*/
footer
{
height:216px;
background:#142413;
clear:both;
}
footer p
{
font:26px Trebuchet MS;
color:#FFFFFF;
margin:62px 0 0 27px;
float:left;
}
footer img
{
width:365px;
margin-top:70px;
margin-right:15px;
float:right;
}
footer #facebook
{
clear:both;
float:right;
width:30px;
margin-right:295px;
margin-top:-10px;
}
footer #instagram
{
float:right;
width:35px;
margin-top:-12px;
}
mobile.css
@media screen and (max-width: 854px)
{
.container
{
width:96%;
}
header #logo
{
margin-left:27%;
}
header #livros
{
float:right;
margin-right:12%;
}
header .menu_nav
{
display:inline;
margin-left:0;
margin-top:16px;
}
header .pesquisa
{
width:90.9%;
margin-top:2%;
}
header .divisor
{
display:none;
}
header .menu
{
display:none;
width:98%;
height:273px;
}
header nav ul
{
width:100px;
}
header #pesquisar
{
width:92%;
}
.banner_desenhos
{
width:65%;
}
.banner_desenhos img
{
width:95%;
}
.categorias
{
margin-right:0;
}
.livros
{
width:65%;
height:1450px;
margin-top:-120px;
}
.livros ul
{
width:600px;
}
.livros ul li
{
padding:30px 35px 6px 2%;
}
.livros h1
{
width:96%;
margin-left:2%;
}
.livros #grade_livros
{
width:96%;
margin-left:2%;
}
.page
{
width:100%;
}
.categorias
{
margin-right:5px;
}
#alfabeto
{
width:98%;
}
#alfabeto #sub
{
margin-left:5%;
}
.bateristas
{
width:98%;
}
.bateristas ul
{
width:800px;
}
.bateristas ul li
{
padding:0 73px 73px 0;
}
.desenhos
{
width:98%;
}
.desenhos ul
{
margin-left:8%;
}
.desenhos ul li
{
padding:0 30px 30px 0;
}
.contato
{
width:98%;
}
.contato form
{
width:48%;
}
.contato input
{
width:85%;
}
.contato textarea
{
width:85%;
}
#redes
{
width:49%;
margin-left:5px;
}
#face
{
margin-left:23.2%;
}
footer p
{
font-size:20px;
}
footer img
{
margin-top:60px;
}
}
@media screen and (max-width: 800px)
{
header #logo
{
margin-left:20%;
}
header .pesquisa
{
width:90.5%;
}
.banner_desenhos
{
width:63%;
}
.banner_desenhos img
{
width:95%;
}
.livros
{
width:63%;
margin-top:-150px;
}
.livros ul li
{
padding:30px 10px 6px 2%;
}
.page
{
width:100%;
}
#alfabeto #sub
{
margin-left:3%;
}
.bateristas ul li
{
padding:0 65px 65px 0;
}
.desenhos ul
{
margin-left:6%;
}
footer p
{
margin-top:70px;
}
footer img
{
margin-top:70px;
}
}
@media screen and (max-width: 720px)
{
header #logo
{
margin-left:12%;
}
header #livros
{
margin-right:10%;
}
header .pesquisa
{
width:90.1%;
margin-top:2.4%;
margin-right:0.5%;
}
header #pesquisar
{
width:89%;
}
.banner_desenhos
{
width:58%;
}
.livros
{
width:58%;
height:2050px;
margin-top:-200px;
}
.livros ul
{
width:400px;
}
.livros ul li
{
padding:30px 35px 6px 7%;
}
.bateristas iframe
{
width:90%;
}
.bateristas ul li
{
padding:0 10px 10px 0;
}
.desenhos img
{
width:232px;
}
.desenhos ul
{
margin-left:10%;
}
footer p
{
font-size:20px;
margin-left:29%;
margin-top:50px;
}
footer img
{
float:left;
margin-left:22%;
margin-top:30px;
}
}
@media screen and (max-width: 600px)
{
header #logo
{
margin-left:18%;
}
header #livros
{
display:none;
}
header .pesquisa
{
width:88%;
}
header #pesquisar
{
width:88%;
}
header .menu_nav
{
margin-top:13px;
}
.banner_desenhos
{
width:50%;
}
.livros ul
{
width:275px;
}
.livros
{
margin-top:-270px;
margin-right:0
height:1750px;
}
.livros figure
{
width:132px;
}
.livros img
{
width:80%;
}
.livros h1
{
font-size:20px;
}
.livros figcaption
{
font-size:18px;
}
.livros
{
width:50%;
}
.livros ul li
{
padding:30px 4px 6px 0.5%;
}
.bateristas ul
{
width:450px;
margin-left:15%;
}
.bateristas iframe
{
width:400px;
height:250px;
}
.desenhos ul
{
margin-left:9%;
}
.desenhos img
{
width:200px;
}
.contato input
{
width:90%;
}
.contato textarea
{
width:90%;
}
.contato form
{
width:98%;
}
.descricao_livro figcaption
{
margin-right:11px;
}
.descricao_livro figure
{
width:200px;
}
.descricao_livro img
{
width:70%;
}
#redes
{
width:98%;
height:220px;
}
#face
{
margin-left:32%;
}
footer p
{
margin-left:25%;
}
footer img
{
margin-left:16%;
}
}
@media screen and (max-width: 480px)
{
header #logo
{
margin-left:4%;
}
header .pesquisa
{
width:85%;
}
header #pesquisar
{
width:84%;
}
header .menu_nav
{
margin-top:9px;
}
.banner_desenhos
{
width:35%;
}
.livros ul
{
width:170px;
margin-left:5%;
}
.livros
{
width:35%;
}
.livros h1
{
padding-left:5px;
font-size:15px;
}
.sobre img
{
display:none;
}
}
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/mobile.css"/>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/cycle2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="js/validacao.js"></script>
<script type="text/javascript" src="js/show_menu.js"></script>
<?php
$conexao = mysqli_connect("127.0.0.1", "root", "", "meusite");
include("limita_palavras.php");
if (empty($_SESSION)) session_start();
if (empty($_SESSION['UsuarioID']))
{
session_destroy();
}
$verificar_manu = mysqli_query($conexao,"SELECT status FROM manutencao WHERE status = 'ativo'")or die(mysqli_query($conexao));
if(mysqli_num_rows($verificar_manu) >= 1 && empty($_SESSION['UsuarioID']))
{
echo "<h1>Site em manutenção...</h1>";
exit;
}
if(isset($_GET['topicos']))
{
$temp = explode('/',$_GET['topicos']);
$pgatual = strtolower(end($temp));
}
else
{
$pgatual = "";
}
?>
<title>BibliotecaDC | <?=$pgatual;?></title>
</head>
<body>
<header class="container">
<a href="index.php?topicos=nav/home"><img id="logo" width="394" src="images/logo.png"/></a>
<img id="livros" width="115" src="images/livros.png"/>
<div class="pesquisa">
<form name="form" action="index.php?topicos=nav/search" method="post">
<input id="lupa" type="image" src="images/lupa.png"/>
<input name="pesquisa" type="text" id="pesquisar"/>
</form>
</div>
<div class="menu_nav">
<div class="grade"></div>
<div class="grade"></div>
<div class="grade"></div>
</div>
<div class="clear"></div>
<nav class="menu">
<ul>
<li><a href="index.php?topicos=nav/sobre">Sobre</a></li><div class="divisor"></div>
<li><span><a href="index.php?topicos=nav/livros">Livros</a></span></li><div class="divisor"></div>
<li><span><a href="index.php?topicos=nav/bateristas">Bateristas</a></span></li><div class="divisor"></div>
<li><span><a href="index.php?topicos=nav/desenhos">Desenhos</a></span></li><div class="divisor"></div>
<li id="final_list"><span><a href="index.php?topicos=nav/contato">Contato</a></span></li>
</ul>
</nav>
</header>
index.php
<?php include"header.php";?>
<?php
if(empty($_GET['topicos']))
{
include("nav/home.php");
}
elseif(substr($_GET['topicos'], 0,4)=='http' or
substr($_GET['topicos'],0,1)=='/' or substr($_GET['topicos'],0,1)=='.')
{
echo"<font face=Arial size=11px><br>A Página Não Existe</font>";
}
else
{
include($_GET['topicos'].".php");
}
?>
<?php include"footer.php";?>
footer.php
<footer class="container">
<p>©: 2018 - DC Desenvolvimento<br/> Todos os direitos reservados</p>
<img src="images/DCDesenvolvimento.png"/>
</footer>
</body>
</html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<head>
do site primeiro deve vir a indexação do .CSS padrão, depois dele na linha de baixo vc indexa o .CSS com as classes responsivas... Ex:<link href="padrao.css" rel="stylesheet">
e na linha de baixo depois desse .css<link href="responsivo.css" rel="stylesheet">
o seu está dessa forma??