Hacer que el texto dentro del <span> sea responsive

[Hildergarn]

Les quiero pedir ayudar con el siguiente texto que tengo dentro de un <span> (La guía que te pondrá a viajar de inmediato). Dicho texto quisiera que se mostrara como en esta imagen:



lo cual sucede sin problemas en mi laptop, pero al verlo desde un tablet aparece así al mostrarse en horizontal:


(verán que el texto sale un poco más extendido que la imagen de arriba)

y si coloco el tablet vertical, así es como aparece el escrito:



El código css que tengo para dicho <span> es este:

Código:

.cinta-verde 
{
background: url('http://www.viajesycosasasi.com/wp-content/uploads/2015/02/cinta-verde.png') no-repeat; 
background-size: contain; 
background-position: center; 
width: 100%; 
display: inline-block; 
color: #fff; 
font-size: 1.3em; 
text-align: center; 
height: 70px; 
line-height: 2.4; 
margin-bottom: 20px;
}

Ciertamente no soy muy bueno con esto del código responsive, así que les agradezco cualquier ayuda al respecto.

[rodrypaladin]

Has probado con el inspector de código para ver qué es lo que falla ? Si lo identificas y no puedes cambiarlo por que te descuadra el diseño en otra resolución, solo tendrías que añadirle un media querie para que te lo solucione solo en dicha resolución

[Hildergarn]

Iniciado por rodrypaladin

Has probado con el inspector de código para ver qué es lo que falla ? Si lo identificas y no puedes cambiarlo por que te descuadra el diseño en otra resolución, solo tendrías que añadirle un media querie para que te lo solucione solo en dicha resolución

Hola, que tal. ¿Cómo sería eso de agregarle un media queria?

[rodrypaladin]

Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo.

Por ejemplo puedes hacer que cuando la pantalla del dispositivo del visitante sea menor de una resolución.. Aplique unos estilos específicos, los cuales en tu caso serían los que solucionen el problema que tienes en tu span, preo primero tienes que identficarlo, a primera vista sin ver el código parece o un padding o una declaración de un alto fijo

[diegoguerrero]

Yo para todo esto te recomendaría que, en vez de usar una imagen, usaras simplemente código. Cosas como los canvas y similares te vendría muy bien, porque podrías conseguir que se redimensione.

¡Saludos!