Archivo de la categoría: Uncategorized

Cambiar orden de columnas con Bootstrap

El otro día un compañero de mi equipo de trabajo tuvo problemas a la hora de hacer una maquetación. Quería tener dos columnas y hacer que en modo XS de Bootstrap cambiaran de orden. Tras varios intentos me puse con él y le explique como hacerlo y el motivo de su “lio”.

Por intuición uno piensa que las clases de Bootstrap permiten cambiar el orden desde el modo en el que lo configures (xs, sm, md o lg) hacia “abajo” (modo móvil), con lo que su código inicial era:

<div class="col-sm-4 col-xs-push-12">column 1</div>
<div class="col-sm-8 col-xs-pull-12">column 2</div>

Código incorrecto, ya que es en nuestro HTML donde debemos hacer el cambio de orden para que nuestras columnas se cambien en modo xs y aplicar las clases de ordenación en los modos “superiores”:

<div class="col-sm-4 col-sm-push-8">column 2</div>
<div class="col-sm-8 col-sm-pull-4">column 1</div>
Anuncios

Anuncio AdSense responsivo. Cambiar posición a horizontal, vertical o rectangular.

Para poder hacer que los anuncios integrados con Google AdSense de nuestro sitio sean responsivos (adaptables a dispositivos móviles) debemos regenerar el código del bloque de anuncio desde Google AdSense indicando Bloque de anuncio adaptable en el desplegable Tamaño de anuncio. De igual manera seleccionaremos Tamaño óptimo en el desplegable Modo.

Esto hará que el anuncio se adapte automáticamente a su contenedor independientemente del dispositivo que se utilice para navegar por nuestra página web.

Pero hay un pequeño problema: el anuncio puede tomar forma horizontal, vertical o rectangular de forma automática y puede ocurrir que aunque tengamos un anuncio responsivo, éste nos descuadre nuestra maquetación web. Para evitar este problema podemos forzar la forma de nuestro anuncio editando el código que nos genera Google AdSense:



<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"></ins>

El valor auto del atributo personalizado data-ad-format es el que indica a Google que puede usar cualquier forma de anuncio (vertical, horizontal o rectangular). Por tanto, cambiando el valor de este atributo forzaremos a que siempre se utilice la misma forma de anuncio, dependiendo del formato que queramos cambiaremos su valor a:



data-ad-format="horizontal"

data-ad-format="vertical"

data-ad-format="rectangle"

Semanita de vacaciones

Pues eso, así que postearemos lo mínimo. En su defecto, nada. 🙂