Difficulties with responsiveness

Asked

Viewed 121 times

2

I’m having difficulties with responsiveness, I want to know why I’m not able to adapt my site to this resolution of 720x1280, theoretically my site should fit well in landscape mode in these phones because I did it in 1000px, And in this other 720 resolution I’ve already done the responsiveness using the media query "@media screen and (max-width: 720px)", but it’s not working. I have made the responsiveness to 480px also and nothing of the layout fit in 720px. What is happening?

Note: I didn’t use mobile first, I know it’s better.

Since 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, doing a media query under 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 so through intuition even because on the computer, resizing the browser, everything is working, however on mobile phones not.

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

css
  • 1

    Good morning. Got / how you have set the meta tag viewport?

  • have set in viewport the ratio size as device width so <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

  • How is the structure of your CSS? You know that the @media rules should be the last lines of your code right? Type first comes all your normal CSS, then at the end you do the "@media screen and (max-width: 720px)" etc... Yours is like this?

  • I put this whole viewport there, it didn’t help, and I’m using the media querys in a separate file from my normal CSS, I think the problem should not be this right @hugocsl?

  • Using in a separate file is no problem. BUT... what you have to take care of is that in <head> of the site first must come the indexing of the standard . CSS, after it in the bottom line vc indexes the . CSS with the responsive classes... Ex: <link href="padrao.css" rel="stylesheet"> and at the bottom line after that . css <link href="responsivo.css" rel="stylesheet"> yours is that way??

  • Yes, it is so.

  • I’ll add information for you to help me better.

  • Cara to thinking that his problem is with the indexing of the code on the page, check if the files are in the correct folders, and if you are putting the full path of the file .css... for ex: href="../css/padrao.css" You can Go to Chrome Devtools and go to the Network Tab, give an F5 and check if all the . css files have been loaded!

  • as a way to test if there is an error in the media declaration you can check if the test environment has the necessary conditions with the window.matchMedia? [example: window.matchMedia("screen and (max-width: 720px)").matches]

  • Can explain better?

  • in what environment are you testing the media queries? , if you use Chrome devtools for example, and you have the resolution you want to test, you can run the previously placed command (window.matchMedia) with the media query you have in your css, if the function returns true is because although the media query is correct there may be another one to override or your code is not even coming to the media query if it is false you have something that is not matching with the media query and so you don’t see results

  • To testing in Chrome, using what you said, it seems that the layout changes, when I take the layout back to normal. The site is already hosted if you want to know, this is the environment you wanted to know?

  • @David’s question was precisely whether you were using devtools on a desktop, simulating screen resolutions through the tools. What kind of properties do you have to fail? Queries are responding according to the code you entered, but watch out if in the media queries you are changing "everything" for all resolutions, because the way they are, overlapping, you may be pulling code from more than one resolution and so it’s not working for you. ex: if you have width=720, max-width queries: 800px and max-width: 720px are working, if there is no correct overlay, fail.

  • @Ana Teixeira has another way of doing?

  • Let’s go continue this discussion in chat.

Show 10 more comments

1 answer

0

try this line that was ana Xeira was saying .

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

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

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

  • Unfortunately did not resolve.

  • can pass css and html to test

  • How do I command? It’s too much code.

  • you have an option that when you add another answer (blue button underneath) there is an icon ( < >) and just click on it says the html and the css side and just put it and make it add the question

  • added, forehead there.

  • try to change the 1000px to 100% if it goes to whole screen to see if to solve the problem everything that and width changes to % when it comes to containers or layouts in level the Heights of the values of vh being 100 vh the full screen you have here a good explanation of how https works as follows://Developers.google.com/web/Fundamentals/design-and-ux/Responsive/

  • When it comes to adapting to mobile I put percentages in the widths.

Show 2 more comments

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.