Skip to main content
se añadieron 203 caracteres en el cuerpo
Origen Enlace
neollob
  • 1.3k
  • 1
  • 6
  • 9

El problema esta en las table que contienen los elementos del footer, tienen una anchura fijada del 50%. Podrias asignarles una clase comúnid a ambas table y modificar su anchura con las media queries.

    <style>
          @media only screen and (max-width: 600px) {
        .tablefooter    #tablefooter1,#tablefooter2 {
              min-width: 100%;
            }
            #templateFooter{
              display: block;

            }
          }
        </style>

    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="m_-1154148660934519737bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#ffffff">
            <tr>
              <td align="center" valign="top" id="m_-1154148660934519737bodyCell" style="height:100%;margin:0;padding:0;width:100%;padding:10px;border-top:0">

    <tr>
              <td valign="top" id="templateFooter" style="background-color:#ffabab;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; width:100%">
              <tbody>
              <tr>
              <td valign="top" style="padding-top:0px; width:100%">
              <table class="tablefooter"id="tablefooter1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
              <tbody>
              <tr>
              <td id="contentfooter1" valign="top" class="m_-1154148660934519737mcnTextContent" style="word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;height:150px;vertical-align:middle;background-color:#004485;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
              Incesped junto a CCGrass<br>
              el fabricante líder en más de 100 países<br>
              <img height="37" src="https://chimpancedigital.com.ar/news/incesped/img4_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:191px;height:37px;margin:0px" width="191">
              </td>
              </tr>
              </tbody>
              </table>
              <table class="tablefooter"id="tablefooter2" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
              <tbody>
              <tr>
              <td id="contentfooter2" valign="top" class="m_-1154148660934519737mcnTextContent" style="text-align: center; word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;background-color:#007b37;height:150px;vertical-align:middle;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
              <img align="center" height="67" src="https://chimpancedigital.com.ar/news/incesped/img3_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:200px;height:67px;margin:0px" width="200">
              </td>
              </tr>
              </tbody>
              </table>
              </td>
              </tr>
              </tbody>
              </table>
              </td>
              </tr>
             </td>
            </tr>
          </table>

El problema esta en las table que contienen los elementos del footer, tienen una anchura fijada del 50%. Podrias asignarles una clase común a ambas table y modificar su anchura con las media queries.

<style>
      @media only screen and (max-width: 600px) {
        .tablefooter {
          min-width: 100%;
        }
        #templateFooter{
          display: block;

        }
      }
    </style>

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="m_-1154148660934519737bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#ffffff">
        <tr>
          <td align="center" valign="top" id="m_-1154148660934519737bodyCell" style="height:100%;margin:0;padding:0;width:100%;padding:10px;border-top:0">

<tr>
          <td valign="top" id="templateFooter" style="background-color:#ffabab;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; width:100%">
          <tbody>
          <tr>
          <td valign="top" style="padding-top:0px; width:100%">
          <table class="tablefooter" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
          <tbody>
          <tr>
          <td id="contentfooter1" valign="top" class="m_-1154148660934519737mcnTextContent" style="word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;height:150px;vertical-align:middle;background-color:#004485;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
          Incesped junto a CCGrass<br>
          el fabricante líder en más de 100 países<br>
          <img height="37" src="https://chimpancedigital.com.ar/news/incesped/img4_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:191px;height:37px;margin:0px" width="191">
          </td>
          </tr>
          </tbody>
          </table>
          <table class="tablefooter" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
          <tbody>
          <tr>
          <td id="contentfooter2" valign="top" class="m_-1154148660934519737mcnTextContent" style="text-align: center; word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;background-color:#007b37;height:150px;vertical-align:middle;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
          <img align="center" height="67" src="https://chimpancedigital.com.ar/news/incesped/img3_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:200px;height:67px;margin:0px" width="200">
          </td>
          </tr>
          </tbody>
          </table>
          </td>
          </tr>
          </tbody>
          </table>
          </td>
          </tr>
         </td>
        </tr>
      </table>

El problema esta en las table que contienen los elementos del footer, tienen una anchura fijada del 50%. Podrias asignarles una id a ambas table y modificar su anchura con las media queries.

    <style>
          @media only screen and (max-width: 600px) {
            #tablefooter1,#tablefooter2 {
              min-width: 100%;
            }
            #templateFooter{
              display: block;

            }
          }
        </style>

    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="m_-1154148660934519737bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#ffffff">
            <tr>
              <td align="center" valign="top" id="m_-1154148660934519737bodyCell" style="height:100%;margin:0;padding:0;width:100%;padding:10px;border-top:0">

    <tr>
              <td valign="top" id="templateFooter" style="background-color:#ffabab;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; width:100%">
              <tbody>
              <tr>
              <td valign="top" style="padding-top:0px; width:100%">
              <table id="tablefooter1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
              <tbody>
              <tr>
              <td id="contentfooter1" valign="top" class="m_-1154148660934519737mcnTextContent" style="word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;height:150px;vertical-align:middle;background-color:#004485;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
              Incesped junto a CCGrass<br>
              el fabricante líder en más de 100 países<br>
              <img height="37" src="https://chimpancedigital.com.ar/news/incesped/img4_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:191px;height:37px;margin:0px" width="191">
              </td>
              </tr>
              </tbody>
              </table>
              <table id="tablefooter2" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
              <tbody>
              <tr>
              <td id="contentfooter2" valign="top" class="m_-1154148660934519737mcnTextContent" style="text-align: center; word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;background-color:#007b37;height:150px;vertical-align:middle;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
              <img align="center" height="67" src="https://chimpancedigital.com.ar/news/incesped/img3_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:200px;height:67px;margin:0px" width="200">
              </td>
              </tr>
              </tbody>
              </table>
              </td>
              </tr>
              </tbody>
              </table>
              </td>
              </tr>
             </td>
            </tr>
          </table>
Origen Enlace
neollob
  • 1.3k
  • 1
  • 6
  • 9

El problema esta en las table que contienen los elementos del footer, tienen una anchura fijada del 50%. Podrias asignarles una clase común a ambas table y modificar su anchura con las media queries.

En tu codigo quedaria asi:

<style>
      @media only screen and (max-width: 600px) {
        .tablefooter {
          min-width: 100%;
        }
        #templateFooter{
          display: block;

        }
      }
    </style>

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="m_-1154148660934519737bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#ffffff">
        <tr>
          <td align="center" valign="top" id="m_-1154148660934519737bodyCell" style="height:100%;margin:0;padding:0;width:100%;padding:10px;border-top:0">

<tr>
          <td valign="top" id="templateFooter" style="background-color:#ffabab;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; width:100%">
          <tbody>
          <tr>
          <td valign="top" style="padding-top:0px; width:100%">
          <table class="tablefooter" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
          <tbody>
          <tr>
          <td id="contentfooter1" valign="top" class="m_-1154148660934519737mcnTextContent" style="word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;height:150px;vertical-align:middle;background-color:#004485;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
          Incesped junto a CCGrass<br>
          el fabricante líder en más de 100 países<br>
          <img height="37" src="https://chimpancedigital.com.ar/news/incesped/img4_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:191px;height:37px;margin:0px" width="191">
          </td>
          </tr>
          </tbody>
          </table>
          <table class="tablefooter" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;width:50%" class="m_-1154148660934519737mcnTextContentContainer">
          <tbody>
          <tr>
          <td id="contentfooter2" valign="top" class="m_-1154148660934519737mcnTextContent" style="text-align: center; word-break:break-word;color:#656565;font-family:Helvetica;font-size:12px;line-height:150%;text-align:center;background-color:#007b37;height:150px;vertical-align:middle;padding:0px 18px 9px;color:#ffffff;font-family:Arial,&quot;Helvetica Neue&quot;,Helvetica,sans-serif;font-size:12px;line-height:150%">
          <img align="center" height="67" src="https://chimpancedigital.com.ar/news/incesped/img3_instancia1.png" style="border:0;height:auto;outline:none;text-decoration:none;height:auto!important;border:0px;width:200px;height:67px;margin:0px" width="200">
          </td>
          </tr>
          </tbody>
          </table>
          </td>
          </tr>
          </tbody>
          </table>
          </td>
          </tr>
         </td>
        </tr>
      </table>

Espero que te sirva, saludos.