Difficulty with responsive

-2

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?

link

Obs1: Ignore the text of the site, just to test it. Obs2: the meta tag is thus, as suggested by another site

    
asked by anonymous 28.09.2017 / 19:14

2 answers

1

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 selectors

     

I 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>
    
28.09.2017 / 19:26
0

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:

link

@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;
    }
}
    
28.09.2017 / 19:30