El badge de google plus lo podemos sacar fácilmente desde esta página. Definimos los parámetros, si lo queremos vertical u horizontal, con más o menos información y el ancho… Y aquí viene el problema del responsive.

Cuando maquetamos como responsive ese bagde que normalmente suele ir en el lateral lo acoplamos a la medida del sidebar, pero cuando lo vemos en tablet o móvil, seguramente ese sidebar haya cambiado de ancho y por tanto sobresalga o se quede corto. Para ello podemos crear 3 divs cuyo contenido sea exactamente igual pero en el que sólo cambie el ancho, algo así:

[syntax_prettify linenums=””]
<div class=”google-desktop”>

<div data-href=”https://plus.google.com/ID” data-width=”180″ data-rel=”author” data-layout=”portrait” ></div>
</div>

<div class=”google-tablet”>
<div data-href=”https://plus.google.com/ID” data-width=”430″ data-rel=”author” data-layout=”portrait” ></div>
</div>

<div class=”google-movil”>
<div data-href=”https://plus.google.com/ID” data-width=”270″ data-rel=”author” data-layout=”portrait” ></div>
</div>

<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
[/syntax_prettify]

Y en el CSS, mediante media queries, ocultar o no los divs que nos interesen con la propiedad display:

[syntax_prettify linenums=””]
.google-desktop {display:block;}
.google-movil, .google-tablet {display:none;}

@media only screen and (max-width: 479px) {

.google-tablet {display:block;}
.google-desktop, .google-movil {display:none;}

}

@media only screen and (max-width: 320px) {

.google-movil {display:block;}
.google-desktop, .google-tablet {display:none;}

}
[/syntax_prettify]

El problema de esta solución es que sólo funciona si las medidas que hemos aplicado en nuestro css a los cambios por responsive son fijas, es decir, en píxels.

[call_to_action]¿A alguien se le ocurre cómo hacerlo con medidas relativas?[/call_to_action]