0

Estoy trabajando en una página que debe ser responsiva. La cuestión es que tengo un texto dentro de una etiqueta span y al verlo desde un celular las letras se enciman.

Este es el fragmento del código:

<div style="margin:0 auto; max-width: 1000px;">
  <div>
    <p style="text-align: center;">
      <span style="font-size: 36px;">
        Este span es un elemento en línea; este fondo se ha coloreado 
        para mostrar el principio y fin de la influencia del elemento en línea
      </span>
    </p>
  </div>
</div>

Me gustaría que me pudieran dar una explicación de por qué sucede esto, de antemano les agradezco su tiempo.

2
  • 2
    Hola y bienvenido, te invito a que hagas el recorrido para que entiendas como funciona el sitio y de paso ganes tu primera medalla. Sobre tu pregunta, no logro reproducir el error que mencionas con el código que muestras. Por favor revisa: ¿Cómo crear un ejemplo verificable? Commented el 22 oct. 2019 a las 19:03
  • Hola y gracias. Al reproducirlo en una computadora utilizando google chrome con las herramientas de desarrollador no se puede visualizar. La situación me sucede cuando lo visualizo desde un celular o una tablet. Commented el 22 oct. 2019 a las 19:17

1 respuesta 1

1

Por si a alguien le sirve les dejo lo que hice para poder resolverlo. En un archivo css agregue un line-height para separar el texto. Les dejo el código css que utilice en caso de que se encime el texto en el celular:

@media only screen and (max-width:479px), only screen and (max-device-width:479px){
  div div p span {line-height : 40px !important;}
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.