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.