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