Foros del Web » Creando para Internet » CSS »

Problema con Responsive Design

Estas en el tema de Problema con Responsive Design en el foro de CSS en Foros del Web. Hola a todos! Veréis, estoy adaptando una web para que se vea en dispositivos móviles pero me estoy encontrando con un problema... Tengo el siguiente ...
  #1 (permalink)  
Antiguo 06/03/2013, 02:44
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 11 años, 10 meses
Puntos: 14
Pregunta Problema con Responsive Design

Hola a todos!

Veréis, estoy adaptando una web para que se vea en dispositivos móviles pero me estoy encontrando con un problema...

Tengo el siguiente código:

Código HTML:
Ver original
  1. <section class="bloque-contenido" id="empresa">                
  2.                 <section id="texto-seccion">
  3.     <article id="muestraTexto-seccion">
  4.         <article id="titulo-parrafo">
  5.             <p>&iquest;Qui&eacute;nes Somos?</p>
  6.         </article>
  7.         <article id="primer-bloque">
  8.             <p>        
  9.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt consectetur elit quis fringilla. Integer tortor enim, consectetur id interdum vitae, mollis in magna.
  10.                 Quisque sed ligula dui, eget tristique lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  11.             </p>
  12.         </article>
  13.         <article id="segundo-bloque">
  14.             <p>        
  15.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt consectetur elit quis fringilla. Integer tortor enim, consectetur id interdum vitae, mollis in magna.
  16.                 Quisque sed ligula dui, eget tristique lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  17.             </p>
  18.         </article>
  19.         <article id="tercer-bloque">
  20.             <p>        
  21.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt consectetur elit quis fringilla. Integer tortor enim, consectetur id interdum vitae, mollis in magna.
  22.                 Quisque sed ligula dui, eget tristique lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  23.             </p>
  24.         </article>
  25.     </article>

Y el css que tengo es el siguiente:

Código CSS:
Ver original
  1. html,body{width:100%;height:100%;padding:0;margin:0;color:#FFF;}
  2. .bloque-contenido{width:100%;height:100%;color:#FFF;text-align: center;}
  3. #texto-seccion{background: url('js/vegas/overlays/04.png') repeat #0C3C1A;                color: #FFFFFF;font-size: 12pt;width:50%;height:100%;position:absolute;left:0;bottom:-100%;}
  4. #primer-bloque{position:relative;}
  5. #segundo-bloque{position:relative;}
  6. #tercer-bloque{position:relative;}

Ahora mi problema:

En los navegadores de PC consigo que se vea como quiero (el bloque texto-seccion, que ocupe toda la pantalla a su largo) sin embargo, cuando hago el responsive design para pantallas de 320px y lo compruebo con mi teléfono, dicho bloque es como si se "cortase", no se ve hasta donde ocupa el bloque #tercer-bloque y no sé por qué (si no me explico bien, lo decís y lo intento mejor porque no tengo imágenes que pueda enseñar jeje).

Os pongo el código del responsive design que tengo...
Código CSS:
Ver original
  1. @media screen and (max-width: 320px){
  2.     body,html{width:100%;height:auto;}
  3.     #nav{font-size: 9pt;}
  4.     .bloque-contenido{width:100%;height: 100%;}
  5.     #texto-seccion{width:100%;height:auto;min-height:100%;}
  6.     #titulo-parrafo{width:100%;left:0;font-size: 12pt;}
  7.     #primer-bloque,#segundo-bloque,#tercer-bloque{width:100%;height:auto;}
  8. }
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #2 (permalink)  
Antiguo 06/03/2013, 03:20
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 13 años, 10 meses
Puntos: 2236
Respuesta: Problema con Responsive Design

Supongo que si a #texto-seccion le quitas height:100%; la altura se adaptará al contenido y no habrá cortes.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 06/03/2013, 03:23
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 11 años, 10 meses
Puntos: 14
Respuesta: Problema con Responsive Design

Cita:
Iniciado por Triby Ver Mensaje
Supongo que si a #texto-seccion le quitas height:100%; la altura se adaptará al contenido y no habrá cortes.
Gracias por responder! ;)

Verás lo he probado tal como dices, pero si le quito eso no se agranda ni hace nada....

Supongo que al pasar eso es que lo tengo mal planteado la estructura de la página¿?
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #4 (permalink)  
Antiguo 06/03/2013, 03:54
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 11 años, 10 meses
Puntos: 14
Respuesta: Problema con Responsive Design

Estoy probando a reconstruir esa parte desde 0 y no sé qué puede pasar porque la parte que quiero que me ocupe toda la pantalla hacia abajo se queda en un height: auto.... pongo el código por si podéis orientarme :)

En teoría, debería de ocupar el 100% ya que el contenedor donde está ocupa el 100%.... :S :S :S

Código CSS:
Ver original
  1. /* CONTENEDORES Y CONTENIDOS ================================================ */
  2. #contenedor{width:100%;height: auto;min-height:100%;position:absolute;top:0px;background: #000;}
  3. #texto-seccion{width:50%;height:auto;min-height: 100%;position:relative;float:left;background:blue;padding-top:40px;z-index: 90;font-family: 'Handlee',sans-serif;
  4.                transform:skew(-32deg, 0deg);
  5.                -moz-transform:skew(-32deg, 0deg);-webkit-transform: skew(-32deg, 0deg);
  6.                -ms-transform: skew(-32deg, 0deg);-o-transform: skew(-32deg, 0deg);
  7. }
  8. #configura-texto{width:100%;height:100%;transform:skew(32deg, 0deg);
  9.                 -moz-transform:skew(32deg, 0deg);-webkit-transform: skew(32deg, 0deg);
  10.                 -ms-transform: skew(32deg, 0deg);-o-transform: skew(32deg, 0deg);
  11. }
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"

Etiquetas: design, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:01.