I'm creating a test site, its menu is responsive, the text part I'm not getting responsive, you know what I'm doing wrong?
Obs1: Ignore the text of the site, just to test it. Obs2: the meta tag is thus, as suggested by another site
I'm creating a test site, its menu is responsive, the text part I'm not getting responsive, you know what I'm doing wrong?
Obs1: Ignore the text of the site, just to test it. Obs2: the meta tag is thus, as suggested by another site
Because it simply has no rule for your columns within the media-query ( @media screen and (max-width: 600px)
), ie if you have not "programmed" to do the "action" how do you expect it to work? So just adjust the code using the media-query ( @media screen and (max-width: 600px)
).
Another detail, within <head></head>
add this (you can adjust):
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
And if you're using IE-8, 9, and 10 with DOCTYPE for HTML5 add this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The code should look like this:
Notes:
I removed
body { margin: 0; }
because it already existed in the other selector and I removed unused selectorsI moved the media-query pro final to maintain the order of the "cascade"
body{
padding: 0;
margin: 0;
font-family: 'Open Sans',sans-serif;
}
/* CONFIGURAÇÃO MENU */
ul.topnav {
list-style-type: none;
margin: 1.5% 0 0 0;
padding: 0;
overflow: hidden;
background-color: #d10000;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: 600;
font-size: 16pt;
}
ul.topnav li a:hover:not(.active) {background-color: #3d3d3d; border: 1px solid white;}
ul.topnav li a.active {background-color: #3d3d3d; border: 1px solid white;}
ul.topnav li.right {float: right; border: 1px solid white;}
/* CONFIGURAÇÃO CONTEUDO DIREITA */
.a-right {
padding: 2%;
float: right;
width: 30%;
}
.a-center {
padding: 2%;
width: 60%;
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
.a-center, .a-right {
width: auto;
float: none;
}
}
<ul class="topnav">
<li><a class="active" href="#home">Inicio</a></li>
<li><a href="#news">Novidades</a></li>
<li class="right"><a href="#about">Sobre</a></li>
</ul>
<div class="a-right">
<p>Podemos acreditar que tudo que a vida nos oferecerá no futuro é repetir o que fizemos ontem e hoje. Mas, se prestarmos atenção, vamos nos dar conta de que nenhum dia é igual a outro. Cada manhã traz uma benção escondida; uma benção que só serve para esse dia e que não se pode guardar nem desaproveitar.</p>
<p>Se não usamos este milagre hoje, ele vai se perder.</p>
<p>Este milagre está nos detalhes do cotidiano; é preciso viver cada minuto porque ali encontramos a saída de nossas confusões, a alegria de nossos bons momentos, a pista correta para a decisão que tomaremos.</p>
<p>Nunca podemos deixar que cada dia pareça igual ao anterior porque todos os dias são diferentes, porque estamos em constante processo de mudança.</p>
</div>
<div class="a-center">
<p>Não acredite em algo simplesmente porque ouviu. Não acredite em algo simplesmente porque todos falam a respeito.</p>
<p>Não acredite em algo simplesmente porque está escrito em seus livros religiosos. Não acredite em algo só porque seus professores e mestres dizem que é verdade.</p>
<p>Não acredite em tradições só porque foram passadas de geração em geração. Mas depois de muita análise e observação, se você vê que algo concorda com a razão, e que conduz ao bem e beneficio de todos, aceite-o e viva-o.</p>
<p>Não acredite em algo simplesmente porque ouviu. Não acredite em algo simplesmente porque todos falam a respeito.</p>
<p>Não acredite em algo simplesmente porque está escrito em seus livros religiosos. Não acredite em algo só porque seus professores e mestres dizem que é verdade.</p>
<p>Não acredite em tradições só porque foram passadas de geração em geração. Mas depois de muita análise e observação, se você vê que algo concorda com a razão, e que conduz ao bem e beneficio de todos, aceite-o e viva-o.</p>
<p>Não acredite em algo simplesmente porque ouviu. Não acredite em algo simplesmente porque todos falam a respeito.</p>
<p>Não acredite em algo simplesmente porque está escrito em seus livros religiosos. Não acredite em algo só porque seus professores e mestres dizem que é verdade.</p>
<p>Não acredite em tradições só porque foram passadas de geração em geração. Mas depois de muita análise e observação, se você vê que algo concorda com a razão, e que conduz ao bem e beneficio de todos, aceite-o e viva-o.</p>
</div>
To get the text down when 600px resolution arrives, you have to put the media screen at the bottom for it to be inherited.
@media screen and (max-width: 600px){
Add:
.a-right {float: none; width: 100%}
.a-center {width: 100%}
Inside the media screen, so the text goes down, I put width: 100% ;, but if you want to make more settings in the text it's up to you.
See the result with your code:
@media only screen and (max-width: 500px) {
body {
}
}
body{
padding: 0;
margin: 0;
font-family: 'Open Sans',sans-serif;
}
/* CONFIGURAÇÃO MENU */
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 1.5% 0 0 0;
padding: 0;
overflow: hidden;
background-color: #d10000;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: 600;
font-size: 16pt;
}
ul.topnav li a:hover:not(.active) {background-color: #3d3d3d; border: 1px solid white;}
ul.topnav li a.active {background-color: #3d3d3d; border: 1px solid white;}
ul.topnav li.right {float: right; border: 1px solid white;}
/* CONFIGURAÇÃO CONTEUDO DIREITA */
.a-right {
padding: 2%;
float: right;
width: 30%;
}
.a-center {
padding: 2%;
width: 60%;
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
.a-right {float: none; width: 100%}
.a-center {width: 100%}
body{
float: none;
}
}