fbpx

¿Cómo crear plantillas de correo electrónico responsive con tablas HTML y CSS?

  • Angel Sánchez

    organizador
    8 julio, 2021 en 2:31 pm

    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

  • Mauricio Belmonte

    Miembro
    8 julio, 2021 en 3:21 pm

    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

  • Angel Sánchez

    organizador
    8 julio, 2021 en 5:53 pm

    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

  • Mauricio Belmonte

    Miembro
    9 julio, 2021 en 9:47 pm

    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.

Inicia sesión para responder.

Start of Discussion
0 de 0 respuestas Junio 2018
Ahora