Problema de despliegue en web movil CSS

Buenas noches a todos los que aportan y ayudan en esta comunidad.

Me encuentro renovando un sitio web, pero al querer visualizar el contenido en el sitio movil, me encuentro que una parte se encuentra mal proporcionada a diferencia del sitio web de escritorio.

El sitio en una PC, Mac, etc se ve muy bien [url=www.dental-evolution.com/newsite][/url] la cuestión es que al abrirlo en un iphone o en otro dispositivo movil, se desfaza una parte e incluso el tamaño de fuente para todo el documento lo altera y no se que es lo que suceda.

Estoy usando custom tags en CSS que se que ya no son recomendables, e incluso vi la posibilidad de ocupar 'class' para afectar de igual manera solo partes del documento pero ambos resultados dan lo mismo. Les adjunto una imagen con la comparación de ambos dispositivos.



Este es el código CSS que da el estilo a las 3 ultimas columnas.

Código CSS :

@font-face {
  font-family: 'Calibri';
     src: url('../fuentes/calibri.eot'); /* Para Internet Explorer */
    src: local('Calibri'), /* Para el resto de navegadores */
         url('../fuentes/calibri.ttf') format('truetype'),
         url('../fuentes/calibri.woff') format('woff'),
         url('../fuentes/calibri.svg') format('svg')
}
body,td,th {
   font-family:'Calibri';
   font-size: 15px;
   color: #999999;
   font-weight: lighter;
}
descripcion_15 {
   font-family:'Calibri';
   font-size: 15px;
   color: #999999;
   font-weight: lighter;
}

Y aquí las etiquetas que cubren el texto en dichas áreas.

Código HTML :

<table width="900" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="10" height="121" scope="row">&nbsp;</th>
        <td width="442" valign="top"><table width="442" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" scope="row"><descripcion_15>Reciba nuestras ultimas noticias, reportajes y actualizaciones<br>
              directo en su correo electrónico. (Para enviar presione Enter)</descripcion_15></td>
          </tr>
          <tr>
            <th scope="row">&nbsp;</th>
          </tr>
          <tr>
            <td align="left" scope="row"><form action="mailing.php" method="post" name="mailing" id="mailing">
              <input name="mailing2" type="text" id="mailing" placeholder="Ingrese su E-Mail" size="48" maxlength="48">
            </form></td>
          </tr>
        </table></td>
        <td width="178" align="left" valign="top"><descripcion_15><a href="https://twitter.com/enfoqueclinico" target="_blank">Twitter</a><br>
              <a href="https://www.facebook.com/enfoque.clinico" target="_blank">Facebook</a><br>
          Youtube</descripcion_15></td>
        <td width="270" valign="top"><table width="270" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="left" scope="row"><div class="descripcion_15">Acolman No. 119, Lomas de Atizapán,<br>
            Atizapán de Zaragoza, Estado de México,<br>
            C.P. 52977.</div></td>
          </tr>
          <tr>
            <th scope="row">&nbsp;</th>
          </tr>
          <tr>
            <td align="left" scope="row"><descripcion_azul>5825-8610 | 04455-2903-6239</descripcion_azul></td>
          </tr>
        </table></td>
      </tr>
    </table>

Espero que puedan ayudarme. Este problema me trae sin ideas.
Muchas gracias.

Hola, no logro entender el problema.

Estas señalando 2 textos, pero la única diferencia es el tamaño de la fuente, en el texto de arriba es solo eso y en el texto de abajo se genera dos líneas más, pero es porque llega al máximo de ancho del div.

Yo no veo ningún error más que el tamaño de la fuente, la solución para eso es no usar pixeles y usar "em" o "rem", yo te recomiendo "rem".

Muchas gracias por tu respuesta, efectivamente el texto lo marca más grande y en teoría y por lo que se ve en otros navegadores no debería ser. Por otra parte no uso DIV lo cual se me hace más raro.
Me gustaría tomar tu recomendación sobre el tamaño de la fuente pero no se el concepto de 'em' y 'rem' podrías indicarme un poco como usarlo?

Saludos

sotelor10 escribió:

Hola,
Aquí puedes ver información sobre em, px y rem:

http://rolandocaldas.com/html5/controla-el-tamano-de-la-fuente-con-rem-y-olvida-los-px-y-pt-css3