Difficulties with responsiveness

Question

Difficulties with responsiveness

Navigation

#1 by (0 votes)

2

To have difficulties with responsiveness, I want to know why I can not adapt my site to this resolution of 720x1280, theoretically my site should fit well in landscape mode on these phones because I made it in 1000px, and in that other resolution of 720 I already did the responsiveness using the media query "@media screen and (max-width: 720px)", but it is not working. I've already done responsiveness to 480px too and nothing in the layout fits into 720px. What's going on?

Note: I did not use mobile first, I know it's better.

As I'm doing this for the first time maybe I'm doing something stupid, I'll explain to you how I'm doing the responsiveness, I'm starting at 854px and I'm going up to 320px, I'm doing one media query underneath the other:

@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...
}

I'm doing this way by intuition even though on the computer, resizing the browser, everything is working, however on mobile phones not.

Editing: Adding the codes.

style.css (main css)

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><scripttype="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>&copy: 2018 - DC Desenvolvimento<br/> &nbsp;&nbsp;Todos os direitos reservados</p>
	<img src="images/DCDesenvolvimento.png"/>
</footer>
</body>
</html>

css

asked by anonymous 07.11.2018 / 10:38

1 answer

Unlink functions from 'buttons' in PHP Create Groups and Group Items Within

score 0 · Answer 1

Try this line that was the one I was telling you.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Otherwise try this code in css to see if it corrects the formatting.

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}