Problema con Responsive Design

[madman_18]

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:

<section class="bloque-contenido" id="empresa">                
                <section id="texto-seccion">
    <article id="muestraTexto-seccion">
        <article id="titulo-parrafo">
            <p>&iquest;Qui&eacute;nes Somos?</p>
        </article>
        <article id="primer-bloque">
            <p>        
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt consectetur elit quis fringilla. Integer tortor enim, consectetur id interdum vitae, mollis in magna.
                Quisque sed ligula dui, eget tristique lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            </p>
        </article>
        <article id="segundo-bloque">
            <p>        
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt consectetur elit quis fringilla. Integer tortor enim, consectetur id interdum vitae, mollis in magna.
                Quisque sed ligula dui, eget tristique lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            </p>
        </article>
        <article id="tercer-bloque">
            <p>        
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt consectetur elit quis fringilla. Integer tortor enim, consectetur id interdum vitae, mollis in magna.
                Quisque sed ligula dui, eget tristique lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            </p>
        </article>
    </article>
</section>
</section>
 

Y el css que tengo es el siguiente:

Código CSS:

html,body{width:100%;height:100%;padding:0;margin:0;color:#FFF;}
.bloque-contenido{width:100%;height:100%;color:#FFF;text-align: center;}
#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%;}
#primer-bloque{position:relative;}
#segundo-bloque{position:relative;}
#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:

@media screen and (max-width: 320px){
    body,html{width:100%;height:auto;}
    #nav{font-size: 9pt;}
    .bloque-contenido{width:100%;height: 100%;}
    #texto-seccion{width:100%;height:auto;min-height:100%;}
    #titulo-parrafo{width:100%;left:0;font-size: 12pt;}
    #primer-bloque,#segundo-bloque,#tercer-bloque{width:100%;height:auto;}
}
 

[Triby]

Supongo que si a #texto-seccion le quitas height:100%; la altura se adaptará al contenido y no habrá cortes.

[madman_18]

Iniciado por Triby

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¿?

[madman_18]

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:

/* CONTENEDORES Y CONTENIDOS ================================================ */
#contenedor{width:100%;height: auto;min-height:100%;position:absolute;top:0px;background: #000;}
#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;
               transform:skew(-32deg, 0deg);
               -moz-transform:skew(-32deg, 0deg);-webkit-transform: skew(-32deg, 0deg);
               -ms-transform: skew(-32deg, 0deg);-o-transform: skew(-32deg, 0deg);
}
#configura-texto{width:100%;height:100%;transform:skew(32deg, 0deg);
                -moz-transform:skew(32deg, 0deg);-webkit-transform: skew(32deg, 0deg);
                -ms-transform: skew(32deg, 0deg);-o-transform: skew(32deg, 0deg);
}