[Angel Sánchez]

Hola Mauricio,

Vamos a suponer que hay un contenedor, que llamaremos cont 1, y dos cajas que llamaremos caj1 y caj2.

1.- Contenedor.

Vamos a darle un ancho máximo definido para que en pantallas grandes no haya problema. Usamos la propiedad CSS. Coloca el ancho deseado, yo voy a colocar 700px. max-width: 700px;

2.- Las cajas.

Si queremos que las cajas estén una al lado de otra ocupando cada una un 50%, hay que usar las siguientes propiedades:

• display : inline;
• width: 50%;

En algunas ocasiones los bordes tienen algo de espacio que le dan más tamaño a las cajas, así que, aunque usemos 50% se desborda, para solucionar eso cambiamos por un numero mas bajo; 49, 48, etc. El que mejor se ajuste.

El contenido dentro de las cajas también es importante, si es más grande que su contenedor se desborda. Para las imágenes hay que colocar un ancho del 100% para que siempre tenga el tamaño de su contenedor y no se desborde. width: 100%;

3.- CSS media queries.

Si deseas que al llegar a una pantalla de 500px o menor las dos cajas pase a ocupar el 100% en ves del 50% cada uno, hay que hacer lo siguiente:

@media only screen and (max-width: 500px) {
     .caja1 {
        display : block;
        width: 100%;
      }
  }

Con ese código al llegar a una pantalla de 500px o menor las cajas cambian al 100% y no se vera una al lado de la otra.

Espero haber ayudado. Hay mas forma de hacer esto, como lo que vemos en el Módulo 5 – Diseño web adaptable: https://www.azulschool.net/lessons/5-1-web-movil/ del curso de MTHL y CSS.

5.1 Web móvil