Anuncios adsense cortados a la mitad en diseño responsive (adaptable)


Los anuncios adsense de mi plnatilla responsive de blogger se muestran cortados a la mitad (se muestra solo la mitad de arriba) en su versión normal y versión móvil (que en la mayoría de los casos viene siendo la misma. Igual cuando reduzco el tamaño de la ventana del navegador también se muestra solo la mitad de los anuncios adsense), ¿a qué se debe y cómo solucionarlos?



Bueno, lo que voy a explicar en este artículo es en base a mi experiencia, al ensayo y error ya que no soy un experto en programación y todo lo que he aprendido sobre html ha sido precisamente con este método de ir probando y cambiar en caso de no notar buenos resultados.

Creo que algunas personas que manejan sus blogs o páginas web en la plataforma blogger les ha pasado que sus anuncios adsense, bien sea anuncios normales o de tipo responsive (adaptables) suelen salir cortados cuando visitan sus propias web desde un móvil o tablet, o cuando reducen el tamaño de la ventana del navegador (google chrome, Mozilla Firefox, internet explorer, etc.).

Este error en sí no se debe al anuncio y no se soluciona agregando alguna etiqueta tipo "div" antes o después del mismo una parseado (si lo vamos a colocar por ejemplo dentro del cuerpo de las entradas), o modificando alguna otra cosa del anuncio (ya que se supone está prohibido por adsense, al menos para la gran mayoría de usuarios).

La solución recae sobre el código en sí de la plantilla, en la parte de blogger de "editar html" de la plantilla, buscando la parte donde están las especificaciones en CSS de este diseño adaptable o responsive, que usualmente aparece de la siguiente manera (dentro de la eitqueta Skin en color azul oscuro):

Responsive CSS



Para encontrar rápidamente esto o algo similar (porque no en todas las plantillas aparece de la misma manera), damos control+f dentro de la ventana del html de nuestro blog para que aparezca un cuadro blanco en la parte superior derecha, y ahí escribimos lo que queremos buscar dando un posterior enter para que así nos lleve a donde esté situada esta palabra, frase o código.



Una vez encontrado o algo similar (puede ser "mobile responsive CSS", o frases similares). Luego, bajando un poco debemos buscar algo que tenga la palabra Iframe (ojo, pueden haber varios Iframe, por lo cual debe ser alguno de los que aparezca debajo de "Responsive CSS"). Aparecerá usualmente algo como esto (o por lo menos en las plantillas de mis blogs aparece de esa forma):

iframe{width: 100%; height: auto;}



Como podrán inferir, a la plantilla le dará la gana de asignar el tamaño de altura que crea conveniente a algunos códigos iframe (como los de los anuncios adsense, fanbox, etc.). De ahí que debemos quitar la palabra auto y cambiarla de la siguiente manera:

iframe{width: 100%; height: 100%;}

Bueno por lo menos éso fue lo que en mi caso funcionó. No tuve que modificar algo relacionado con overflow ni coverflow. Si no les funciona, prueben con otras dimensiones "height" cercanas.


¿Tienes algo que decir sobre este artículo? Compártelo con nosotros en:

siguenos en facebook sígueme en Instagram Canal de youtube siguenos en Twitter