Hola, estoy siguiendo un curso para aprender a hacer webs.
El problema que encuentro es que ellos en el curso consiguen que funcione la web, pero yo por mas vueltas que le doy no consigo saber que es lo que hago mal. No consigo que cuando tienes la pagina a un determinado tamaño enseñe la parte que debe, normalmente solo funciona una, o la great o la medium o la mini, pero no las 3 a la vez.
A ver si podeis echarme una mano ^^ Muchas gracias a todos
index.html
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Ejemplo de adaptativo</title>
<link href="css/colors.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/great.css" rel="stylesheet" type="text/css" media="screen and (min width: 981px)">
<link href="css/medium.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 980px)">
<link href="css/mini.css" rel="stylesheet" type="text/css" media="screen and (max width: 480px)">
</head>
<body>
<header>
<h1>El titulo de mi sitio web </h1>
<h2 class="display-great">Grandisimo</h2>
<h2 class="display-great">Grande</h2>
<h2 class="display-medium">Mediano</h2>
<h2 class="display-mini">Mini</h2>
</header>
<div id="wrapper">
<nav class="main-nav">
<h2>Mi menu</h2>
<select class="menu display-great display-medium">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
<select class="display-mini">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
</nav>
<section id="main-section">
<h2>Mi Contenido </h2>
<article>
<h3><a href="#">Entrada1</a></h3>
<p class="display-great display-medium">Un lorem</p>
</article>
<article>
<h3><a href="#">Entrada2</a></h3>
<p class="display-great display-medium">Un lorem</p>
</article>
<article>
<h3><a href="#">Entrada3</a></h3>
<p class="display-great display-medium">Un lorem</p>
</article>
</section>
</div>
<footer>
<p>Esto es el pie</p>
<select class="display-mini">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
</footer>
</body>
</html>
los distintos CSS
colors.cssbody {
color: black;
}
header {
background-color: #f47e7d;
}
nav {
background-color: #b5d045;
}
section {
background-color: #e0c7a8;
}
footer {
background-color: #fb8335;
}
a,a:link, a:visited, a:active, a:hove {
color: #81c0c5;
}
base.css.display-mini {
display: none;
}
.display-great {
display: none;
}
.display-medium {
display: none;
}
.menu{
padding-left: 0;
}
.menu li{
display: inline;
list-style-type: none;
}
great.css.display-great {
display: inherit !important;
}
h1, h2 {
text-align: center;
}
header, footer, #wrapper {
margin-left:auto;
margin-right: auto;
clear: both;
width: 100%;
max-width: 1500px;
}
#main-nav {
float: left;
width: 20%;
max-width: 300px;
}
main-section {
margin-left: 21%;
width: 79%;
max-width: 1200px;
}
medium.css.display-medium {
display: inherit !important;
}
body{
font-family: Georgia;
}
mini.css.display-mini {
display: inherit !important;
}
body {
font-family: Arial;
}
select.display-mini {
font-size:1.2em;
width:100%;
}
problema solucionado, parece ser que por algo (no tengo claro el qué) no me reconoce los css como debe...
He intentado cerrar el tema o borrarlo, pero no he podido.
finalmente era culpa mia por no prestar toda la atencion que debía...
por ejemplo tenía en un sitio
<nav> como class y luego en el css como id
A eso le añadimos que haciendo pruebas me deje algun fallo por ahí suelto y "liada parda"