Grupo de HTML y CSS
Este grupo esta relacionado con nuestro curso profesional de HTML y CSS. Aquí se comparten temas... View more
organizador:
- Organizado por
-
¿Cómo crear plantillas de correo electrónico responsive con tablas HTML y CSS?
¿Cómo crear plantillas de correo electrónico responsive con tablas HTML y CSS?
Tengo una duda en como hacer responsivo esta caja hecha con tablas, estoy intentando que se haga responsive pero cuando apenas toca los borde de la imagen se rompe, me gustaria que se hicera responsiva y se rompa hasta los 500px como en el ejemplo, la imagen con bordes es mia pero la otra es la referencia que me gustaria tomar para que mi tabla sea responsiva espero me puedan ayudar, soy nuevo aun en los media queries. Muchas gracias
-
Esta discusión fue modificada 1 año, 8 meses por
Angel Sánchez Espinoza. Motivo: Se mejoro el titulo
-
Esta discusión fue modificada 1 año, 8 meses por
- 4 Respuestas
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.
Entendio, ya lo realice pero por ejemplo que quiero que mi ancho maximo sea de 780px y la caj1 tenga un width de 330px y caj2 de 410px, cuando vaya disminuyendo al tocar los 500 se rompa las cajas y la caj2 pase a estar debajo de caj1, como podria hacerlo, hice el ejemplo imaginando las dimensiones dichas y no me respeta el inline. Asi es como quedaria en una foto y el código
Cometí un erro con el tema de display : inline; no te soluciona el problema. Te anexo el doc de como funciona con div, pero como lo quieres para una firma de correo puede que no te funciona del todo. Así que te dejo ese tutorial que es exclusivamente para eso, usando tablas.
https://www.youtube.com/watch?v=bWioL_nn9cI&ab_channel=w3newbie
Muchas gracias profesor, me saco de muchas dudas que tenia. Anexo el archivo final para que alguien que le toque hacer una firma para outlook o gmail pueda tener herramientas.
This file was truncated for preview. Please download to view the full file.
