CSS adapt content to @media screen

Ajusta el contenido dependiendo de los valores de la pantalla del usuario

by Porfirio Chavez

HTML

<body>
    <section id="contenedor">
        <header>
            <div class="encabezado">
              <h1>Cosmetic<span>Fashion</span></h1>
            </div><!--FIN ENCABEZADO -->
        </header>
    <nav>
    </nav>
    </section>

    <section id="contenedor">
      <article class="postt1">
        <p>
       Html 5 es la nueva versión del lenguaje de marcas HTML (HyperText Markup Language), el núcleo de la Web. (Todavia no es definitivo). Es propuesto como siguiente estandar sucesor de HTML 4.01 y de XHTML 1.0 es una forma de reducir la cantidad de plugins (agregados) propietarios para aplicaciones y tecnologias RIA (Rich Internet Applications) tales como Adobe
        </p>
      </article>

      <article class="postt2">
        <p>
          Html 5 es la nueva versión del lenguaje de marcas HTML (HyperText Markup Language), el núcleo de la Web. (Todavia no es definitivo). Es propuesto como siguiente estandar sucesor de HTML 4.01 y de XHTML 1.0 es una forma de reducir la cantidad de plugins (agregados) propietarios para aplicaciones y tecnologias RIA (Rich Internet Applications) tales como Adobe
        </p>
      </article>
    </section>
</body>

CSS

*{margin:0; padding:0; border:0;}

body
{
    background: #C3E5F9;
    color: white;
    font-size: 16px;
    font-family:arial;
    text-shadow: 1px 1px 0 red;
}

article
{
    float: left;
    width: 48%;
} 

#contenedor
{
    background-color: #FCACAA;
    box-shadow:  0px 0px 15px #575757;
    overflow:hidden;
    width: 100%;
    max-width: 1000px;
    padding: 0 10px;
}

.encabezado
{
  background-image:url(/b/images/color.png);
  background-repeat:repeat-x;
  height:50px;
  margin-bottom:5px;
  width:100%;
}

section{
    background: #12A89D;
    overflow: hidden;
    width: 100%;
}

#contenedor_contenido
{
    padding: 0px 10px;
}

.postt1{
    background: #B30F2A;
}

.postt2{
 	background: #1C4583;
}

@media screen and (max-width:1000px){
    #contenedor ,img{
        width:100%;
    }
}


@media screen and (max-width:700px){
    article{
        width:100%;
    }

}