[Resuelto] Problema con resposive usando varios tamaños

Iniciado por madoko, 14 Agosto 2017, 13:36 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

madoko

14 Agosto 2017, 13:36 PM Ultima modificación: 26 Agosto 2017, 14:25 PM por #!drvy
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
Código [Seleccionar]

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.css
Código [Seleccionar]
body {
 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
Código [Seleccionar]
.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
Código [Seleccionar]
.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
Código [Seleccionar]
.display-medium {
 display: inherit !important;
}

body{
 font-family: Georgia;
}

mini.css
Código [Seleccionar]
.display-mini {
 display: inherit !important;
}
body {
 font-family: Arial;
}

select.display-mini {
 font-size:1.2em;
 width:100%;
}

madoko

#1
14 Agosto 2017, 13:51 PM
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.

engel lex

#2
14 Agosto 2017, 14:16 PM
Caché del navegador? Cada vez que recargas limpias el caché?

En chrome la manera simple es recargar presionando ctrl+f5
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.

madoko

#3
14 Agosto 2017, 17:05 PM
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"
Imprimir
Ir Arriba Páginas1
Acciones del Usuario