Difficulty with responsive

Question

Difficulty with responsive

Asked 7 years, 2 months ago

Viewed 47 times

-2

I’m creating a website for testing, his menu is responsive, the text part I’m not able to make responsive, you know what I’m doing wrong?

https://jsfiddle.net/abudc84k/

Obs¹: Ignore the text of the site, it was just to test anyway. Obs²: the meta tag is like this, as suggested by another site

2 answers

Browser other questions tagged html css

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

by Guilherme Nascimento • **98,651** points · Answer 1 · 2017-09-28T17:26:43+00:00

It is because there is simply no rule for your columns inside the media-query (@media screen and (max-width: 600px)), that is if you didn’t "program" to do the "action" how do you expect it to work? Then just adjust the code using the media-query (@media screen and (max-width: 600px)).

Another detail, inside of <head></head> add this (can adjust):

 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

And if you are using IE-8, 9 and 10 with DOCTYPE for HTML5 add this metatag:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The code should look like this:

Notes:

I removed the body { margin: 0; } because it already existed on the other selector and removed unused selectors

I moved the media-query to the end to keep 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>

by Wictor Chaves • **8,445** points · Answer 2 · 2017-09-28T17:30:55+00:00

To scroll down the text when it reaches 600px resolution, you have to put the media screen at the bottom, so it is 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 will go down, I put width:100%;, but if you want to make more settings in the text is at your discretion.

See the result with your code:

https://jsfiddle.net/wictor/abudc84k/4/

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