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

CarlosImb · 30 Abr 2015

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

arthvrian · 30 Abr 2015

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

algo asi como:

HTML:

@media (min-width: 768px {
    .pricing {
        width: 100%;
    }
}
@media (min-width: 992px {
    .pricing {
        width: 50%;
    }
}
@media (min-width: 1200px {
    .pricing {
        width: 25%;
    }
}

CarlosImb · 1 May 2015

arthvrian dijo:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

algo asi como:

HTML:

@media (min-width: 768px { .pricing { width: 100%; } } @media (min-width: 992px { .pricing { width: 50%; } } @media (min-width: 1200px { .pricing { width: 25%; } }

Buenos dias, ese es un estilo Css? Se podrá insertar en joomla 3.0?

Gracias por la ayuda.

arthvrian · 1 May 2015

CarlosImb dijo:
Buenos dias, ese es un estilo Css? Se podrá insertar en joomla 3.0?

Gracias por la ayuda.

si es css, se puede insertar en el .html directamente o en un .css e incluir este en el .html o usar un .css ya existente
la idea de ese css es el cuadrado/rectangulo contenedor del ejemplo que usaste es decir algo como

HTML:

<div class="pricing">
  // aqui va el div o table o lo que sea de lo que se compone la parte amariila y gris del ejemplo
</div>

_Fabian_ · 1 May 2015

Lo puedes poner en un archivo css o dentro de los tags style del header del template y listo, como cualquier estilo css. Dentro de los estilos css, eso se llama media queries, que son estilos que se aplican (o se limitan) de acuerdo al medio y la resolución que se esté visualizando. Eso es fundamental para el responsive design y los principales frameworks css los usan (Foundation, Bootstrap, etc)

En el ejemplo que te ponen tenemos la clase css .pricing, pero su ancho varía de acuerdo a la resolución: cuando la pantalla del navegador tiene un ancho de 768px, .pricing ocupa un ancho del 100%, con 992px ocupa un 50% y con 1200px ocupa un 25%

https://developer.mozilla.org/es/docs/CSS/Media_queries

Buscar

Buscar

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

CarlosImb

Lanero Reconocido

arthvrian

Lanero Reconocido

CarlosImb

Lanero Reconocido

arthvrian

Lanero Reconocido

_Fabian_

Lanero Regular

Los últimos mensajes

Los últimos temas