Hola chicos, verán tengo mi web utiliza un tema responsive y tengo colocado un banner horizontal centrado entre el header y el contenido.
Cuando accedo desde el PC, se ve muy bien, pero cuando accedo a mi web desde un smartphone, el banner se ve cortado.
Como puedo poner un código normal para ordenadores y código específico para móviles en el mismo espacio? Para que cuando accedan del móvil vean el banner móvil y cuando accedan a través del ordenador, el banner horizontal.
Ayuda plis
Ya que nos ponemos, vamos a hacerlo bien. Hay usuarios que se conectan desde móviles y otros desde PC's de escritorio, pero también lo hay que usan netbooks, tablets, etc... no los dejes fuera.
Tienes dos formas de solucionar tu problema.
1.- CREAR UN BLOQUE DE ANUNCIO ADAPTABLE E INSERTARLO DIRECTAMENTE:
Abre tu cuenta de AdSense.
Crear nuevo bloque de anuncios.
Selecciona "Bloque de anuncios Adaptable ( BETA)"
Creas el bloque como cualquier otro e insertas el código directamente en tu sitio.
Ahora los anuncios mostrarán un bloque u otro dependiendo de la resolución de pantalla del dispositivo.
Inconvenientes: AdSense mostrará el bloque de mayor tamaño que el diseño de tu sitio permita. De esta forma, salvo que hayas modificado tu CSS, los usuarios de PC's de escritorio verán bloques de 970 en vez de 728 ( que supongo será el que usas ahora). Esto para algunos sitios es aceptable pero en la mayor parte de casos hará descender tus ingresos además de perjudicar la estética del sitio.
2.- CREAR UN BLOQUE DE ANUNCIO ADAPTABLE Y DEFINIR LOS TAMAÑOS A MOSTRAR:
Abre tu cuenta de AdSense.
Crear nuevo bloque de anuncios.
Selecciona "Bloque de anuncios Adaptable ( BETA)"
Creas el bloque como cualquier otro pero esta vez vamos a insertar junto al código un style para definir los tamaños de anuncios que deseamos que se muestren según el dispositivo sea uno u otro.
El código sería así:
Insertar CODE, HTML o PHP:
<style>
.el nombre de tu bloque de anuncios { width: 320px; height: 50px; } media(min-width: 500px) { .el nombre de tu bloque de anuncios { width: 468px; height: 60px; } } media(min-width: 800px) { .el nombre de tu bloque de anuncios { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- El nombre de tu bloque de anuncios -->
<ins class="adsbygoogle el nombre de tu bloque de anuncios"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Explicación: Como puedes ver, se ha definido por defecto el bloque de 320px por 50px. Es el que se mostrará siempre excepto cuando la pantalla del dispositivo tiene un ancho mínimo de 500px ( una tablet) que se mostrará el anuncio de 468, y cuando el dispositivo tiene un ancho mínimo de 800px ( PC), entonces se muestra el de 728.
Es decir, el anuncio por defecto es el de teléfonos móviles, para entendernos.
