[Mauricio Belmonte]

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.

Firma-responsive.html 23 KB HTML - Click to view

Opciones

• Copy Download Link

<title>HTML FIRMA RESPONSIVE</title> table { border-spacing: 0; } td { padding: 0; } p { font-size: 15px; } img { border: 0; } td.font{ font-family: Arial, Helvetica, sans-serif; } @media screen and (max-width: 599.98px) { .linea{ display: none; } two-columns .padding, .two-third-columns .padding, .three-columns .padding { padding-right: 0!important; padding-left: 0!important; } img.two-col-img { width: 300px!important; max-width: 300px!important; } } @media screen and (max-width: 399.98px) { } <!--[if (gte mso 9)|(IE)]>--> table {border-collapse: collapse !important;} <div style="max-width: 780px;background-color: #fff"> <!-- INICIO 2 COLUMNAS --> <tr> <td> <!-- Separador --> <table width="100%"> <tr> <td> <hr class="linea" width="98%" style="background: #8ab840;border: none;height: 10px"> </td> </tr> </table> </td> </tr> <!-- Separador --> <!-- <tr> <td style="padding: 35px 0 30px 0"> <table width="100%" style="border-spacing: 0" role="presentation"> --> <tr> <td class="two-columns" style="padding: 0;font-size: 0;text-align: center"> <!--[if (gte mso 9)|(IE)]>--> <table width="100%" style="border-spacing: 0" role="presentation"> <tr> <td width="350" valign="top" style="padding: 0"> <table class="column" style="border-spacing: 0;vertical-align: top;width: 100%;max-width: 300px" role="presentation"> <tr> <td class="padding" style="padding: 20px"> <table class="content" style="border-spacing: 0;text-align: left" role="presentation"> <tr> <td> <a href="#" target="_blank"><img decoding="async" class="two-col-img" src="https://s1g.s3.amazonaws.com/f066d9b37e1dd8fa6ad67015e402ef9a.png" alt="" width="260" style="max-width: 260px;border-radius: 8px" border="0"></a> </td> </tr> </table> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]>--> </td><td width="350" valign="top" style="padding: 0"> <table class="column" style="border-spacing: 0;vertical-align: top;width: 100%;max-width: 410px" role="presentation"> <tr> <td class="padding" style="padding: 20px;padding-left: 0px;border-left-width: 15px;border-left-style: solid"> <table class="content" style="border-spacing: 0;text-align: left" role="presentation"> <tr> <td> </td> </tr> <tr> <td class="font" style="padding: 10px 10px 20px 10px"> <p style="font-size: 18px;font-weight: bold;margin-top: 0px;margin-bottom: 0px"> Luna Montserrat Talamantes Ballesteros</p> <p style="color: #8ab840;font-style: italic;font-size: 16px;margin-top: 4px;margin-bottom: 5px"> Gerente de ventas</p> <p style="font-size: 15px;font-weight: bold;margin-bottom: 0px;margin-top: 0px"> Esta Es Una Empresa Ficticia De Prueba S.A</p> <hr width="100%" style="background: #8ab840;border: none;height: 10px"> </td> </tr> <tr> <td align="left" style="padding-left: 10px"> <table align="left" border="0" cellpadding="0" style="border-spacing: 0" role="presentation"> <tr> <!-- telefono --> <table class="font" cellspacing="0" cellpadding="0" border="0"> <tr> <td style="padding-right:7px"> <img decoding="async" width="25" height="25" src="image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABLUlEQVRIieVVwZGDMAx0CSmBEq6ELSElpAQ64MlgP1wCJfh1WLwogRIogRJ8HzMnHAtMkl92Rg8GSbuSbFmpr4QmLJrgzIim9cClYOtwMyMaTegPCEJivXW4FSXXBMcCp5xf61F1A+5RyBp919NqkuSHJImonpFURwRrhiAYgk38Fk1w3YA6I04WFAOfCDQhaI8H8+P/ZlbJogmhG3CXCCaRgOA2v20GLGGtlFJxJsGMaLIEhmCF5Euut60HeBWRdCdGCti1QBpcbEvQhDX3LbVpN4fLF+kMaZvEfr4KVua//eIn52cIlh/VYnQD6nTInCSKmN+qMndk43KrXrnxT0hVFto1klhJf5FE3MIiMjMRLd1bxWg9qm0VHNhc9C6cQXs84n3hB2H6SPLvwx/pXdnXj34B2gAAAABJRU5ErkJggg==" alt="phone" style="border:none;text-decoration: none"> </td> <td> <p style="font:13px Arial, sans-serif"> <span style="color:#0e213d">656 123-4567 of | 656 987-6543 cel</span> </p> </td> </tr> </table> <!-- Telefono --> <!-- Correo --> <br> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td style="padding-right:7px"> <img decoding="async" class="icon0" width="25" height="25" src="image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAxElEQVRIie2UwRGDIBBFLcFSLOGXkBJSQrrIiAdKSAmc1L1RAiWkBEswJxEIgQ1kJh78M3vB/fvg49A0pw4nMaITBCMIa2Hp+wx8BhB0xfCtninA3jjjyj15P+EiCMvm5QEI60CQqcFSoR0IMvRlAf2Em2MwYkT31uvf1+J6soDIAC+yIBK7ga8AztrDjSyIREmFNuVnKYjMRsLZoPchVrZnj0zH7qQawFFxRD8D1J7i/wDugEyZomFMgGa/YTV/06nj6AUwhJutTGRsegAAAABJRU5ErkJggg==" alt="email" style="border:none"> </td> <td> <span style="font:13px Helvetica, Arial, sans-serif"> <a href="mailto:nombredeprueba@dominiodeprueba.com" style="color:#0e213d;text-decoration:none">nombredeprueba@dominiodeprueba.com</a> </span> </td> </tr> </table> <!-- Correo --> ...

Expand

This file was truncated for preview. Please download to view the full file.

[Mauricio Belmonte]

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

solucionazulweb.rar 899 B RAR Archive - Click to view

Opciones

• Copy Download Link

parte-1.png 11 KB Image File - Click to view

Opciones

• Copy Download Link