Foro SpamLoco

Buenas noches, luego de tanto buscar, leer y probar no me ha tocado otra opción que consultarles a los expertos del tema.

Tengo una página web con wordpress.org y estoy usando una plantilla responsive. Cuando veo la adaptación de la plantilla a los navegadores de las PC y las tablets funciona perfecto pero en los teléfonos celulares tengo un problema ya que un slider de texto no se adapta a los tamaños de la pantalla de los teléfonos y no puedo cambiar el tamaño por CSS ya que si lo hago también cambiaría para los navegadores de las PC y las tablets viéndose más pequeño.

Investigando encontré que con JavaScript se podía hacer. Ya que era un Slider de texto, lo que tenía que modificar era una clase y lo hice con "Document.getElementsByClassName. En el código definí que para los teléfonos se modificara el tamaña del Slider de texto y para las tablets y PC se quedara como el tamaño original. Probé modificando la página en la consola de Google Chrome y FireFox y hace el trabajo sin problemas. El inconveniente viene cuando intento cargar el código JavaScript por medio de un plugin en Wordpress (Custom CSS & JS), cuando lo hago y ejecuto no hace absolutamente nada.

He intentado ver si es por un problema de los códigos CSS que he añadido antes y tal vez entren en conflicto pero no es así. No se si es debo agregarle algo más al código para que pueda hacer el trabajo.

Aquí adjunto lo que he hecho:

<script type="text/javascript">

var device = navigator.userAgent

if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)|| device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)|| device.match(/Windows Phone/i)|| device.match(/windows mobile/i)|| device.match(/windows ce/i)|| device.match(/webOS/i)|| device.match(/palm/i)|| device.match(/bada/i)|| device.match(/series60/i)|| device.match(/nokia/i)|| device.match(/symbian/i)|| device.match(/HTC/i)) //Define los teléfonos y navegadores
{

var capas = document.getElementsByClassName('container');
for(var i = 0; capas; i++)
{
capas.style.fontSize = '8px';
}
}
else
{
var capas = document.getElementsByClassName('container');
for(var i = 0; capas; i++)
{
capas.style.fontSize = '8px';
}

}
</script>


Por favor si pueden ayudarme se los agradecería.... Es muy raro que funcione en la consola de los navegadores pero cuando quiero cargarle el código modificado a la programación por medio del plugin no hace absolutamente nada (Destaco que he añadido varias modificaciones por CSS y no había tenido problema alguno)

Muchas gracias de antemano.

Saludos.

Hola Cristhian, por qué no puedes con CSS utilizando los @media para adaptar los elementos según el tamaño de la pantalla?

Muchas gracias Alejandro, efectivamente me funcionó el @media. Ahora tengo otro problema que no sé si sea conveniente colocarlo en este hilo.

Bueno mi problema es que tengo un menú horizontal que se muestra sin problema en la PC pero en las tablets y los teléfonos se minimiza y se debe pinchar para que se muestre... El problema está en que en estos tamaños el menú queda en el medio y para poder visualizarlo completo debo desplazarme con una barra para poder observarlo en su totalidad. No se si me explico.

Intenté hacerlo igual por @media usando este código

@media screen and (max-width: 480px) {
navbar-nav {
margin: 0px -100px;
}
}

pero lo cambiaba para los teléfonos y para las PC también. Mi idea es colocar el menú en los teléfonos del lado izquierdo de las pantallas para que no sea necesario tener que desplazarse para verlo.

Alguna sugerencia?

Muchísimas gracias.

Sin verlo no sabría decirte lo que sucede, si puedes comparte la URL para verlo mejor o el código CSS completo.