Comunidad de diseño web y desarrollo en internet online

Problema de despliegue en web movil CSS

Citar            
MensajeEscrito el 18 Nov 2014 03:09 am
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.

Por muzicamanson

23 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 20 Nov 2014 05:20 am
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".

Por sotelor10

Claber

179 de clabLevel

2 tutoriales

Genero:Masculino  

Diseñador y Maquetador Web

chrome
Citar            
MensajeEscrito el 20 Nov 2014 05:29 am
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, 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".

Por muzicamanson

23 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 24 Nov 2014 04:48 am
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

Por sotelor10

Claber

179 de clabLevel

2 tutoriales

Genero:Masculino  

Diseñador y Maquetador Web

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.