¿Qué código coloco para que estas tablas se acomoden según pantalla?

Buenos dias muchachos,

Pues el caso es que tengo un sitio en joomla 3.4 (la ultima versión) y lo tengo con un template responsive. Hasta allí ningún problema se adapta a las diferentes pantallas.

El caso es que quiero saber ¿qué codigo coloco para que las tablas que se deben mostrar de a 4 en una fila se adapten de acuerdo a la pantalla?. Es decir, que cuando se estreche la pantalla (tablet) se muestren 2 y cuando sean en un celular sea solo 1 y se vea con el scroll la demás información.

He intentado con plugins en Joomla hay muchos pero en realidad son algo complejos y me gustaría ser yo quien haga el diseño en html y luego actualizar rapido la info.

Gracias por la ayuda. Adjunto imagen de lo que quiero yo...saludos

[img]http://www.laneros.com/attachments/quiero-gif.237723/[/img]

Código HTML :

<div class="contenedor">
  <div class="elemento">1</div>
  <div class="elemento">2</div>
  <div class="elemento">3</div>
  <div class="elemento">4</div>
  <div class="elemento">5</div>
  <div class="elemento">6</div>
  <div class="elemento">7</div>
  <div class="elemento">8</div>
</div>

Código CSS :

.contenedor{
  background:#161616;
  max-width:1000px;
  margin:0 auto;
  padding:.5em;
}

.elemento{
  width:100%;
  height:400px;
  display:inline-block;
  vertical-align:top;
  font-size:2em;
  margin-bottom:.2em;
}

.elemento:nth-child(odd){
  background:#12a4c8;
}

.elemento:nth-child(even){
  background:#355f14;
}

@media screen and (min-width: 768px){    
    .elemento{
      width:49.7%;
    }
  }

@media screen and (min-width: 1024px){    
    .elemento{
      width:33%;
    }
  }

@media screen and (min-width: 1280px){    
    .elemento{
      width:24.7%;
    }
  }

http://codepen.io/anon/pen/OVVGbV

Saludos

Lo que hace que se adapte a la pantalla son los "@media".. el resto es solo para darle estilos a los elementos.

Solamente prestale atención a ".elemento" que indica de que tamaño van a ser los elementos que queres que se adapten.. y cada @media indica que tamaño van a cubrir en determinada resolución de pantalla.

El display:inline-block hace que se ubiquen uno al lado del otro, y con vertical-align:top indicamos que esten alineados sus bordes superiores.

Me acabo de dar cuenta que el ejemplo que yo te pase modificaría el ancho de tus imágenes, y en realidad la imagen debería tener el mismo tamaño.

En ese caso, en lugar de modificar el tamaño de las imágenes, modificas el del contenedor para que entren mas o menos imágenes.

De esta forma:

Código HTML :

<div class="contenedor">
  <div class="elemento">1</div>
  <div class="elemento">2</div>
  <div class="elemento">3</div>
  <div class="elemento">4</div>
  <div class="elemento">5</div>
  <div class="elemento">6</div>
  <div class="elemento">7</div>
  <div class="elemento">8</div>
</div>

Código CSS :

.contenedor{
  background:#161616;
  width:260px; /* ancho del contenedor en moviles*/
  margin:0 auto;
  padding:10px 5px;
  text-align:center;
}

.elemento{
  width:250px; /* imagenes con ancho fijo */
  height:400px;
  display:inline-block;
  vertical-align:top;
  font-size:2em;
  margin-bottom:.2em;
}

.elemento:nth-child(odd){
  background:#12a4c8;
}

.elemento:nth-child(even){
  background:#355f14;
}

/* De aca en adelante modificas el tamaño del contenedor 
dependiendo el ancho de la ventana*/

@media screen and (min-width: 768px){    
    .contenedor{
      width:520px; 
    }
  }

@media screen and (min-width: 1024px){    
    .contenedor{
      width:780px;
    }
  }

@media screen and (min-width: 1280px){    
    .contenedor{
      width:1020px;
    }
  }

Ejemplo:

http://codepen.io/anon/pen/JdYjyJ

Saludos