Imagenes de Instagram adaptativas o responsive con flexbox en Wellness Pro

El tema Wellness Pro viene con soporte para Instagram. Concretamente para un plugin que muestra un feed de las últimas publicaciones de la cuenta que elijamos de Instagram. La configuración es sencilla y el plugin es potente y rápido. Yo lo uso a menudo en mis trabajos. 

Pero tal y como viene diseñado el tema, este widget de Instagram no es adaptativo. Sabemos que de por sí un widget no es adaptativo. Me refiero a que no está diseñado para que sea adaptativo. El CSS es lo que hay que corregir y eso es lo que vamos a hacer.  

Imágenes de Instagram adaptativas o responsive en Wellness Pro
Imágenes de Instagram adaptativas o responsive en Wellness Pro

En el demo del tema, proponen un feed de Instagram de 5 imágenes, pues bien, yo lo he cambiado a 6. Así podemos jugar mejor con los anchos y las cantidades de imágenes mostradas en según que tamaño de pantalla. 

La configuración del plugin se quedaría algo así. Yo no he usado mi cuenta, sino que he usado la de un amigo Instructor de Buceo que tiene mejores imágenes :).

Configuración de WP Instagram Widget
Configuración de WP Instagram Widget

El CSS para este Widget del tema original es este:

/* WP Instagram
--------------------------------------------- */

.before-footer .widget-full .null-instagram-feed {
	padding: 0;
	margin: -5.5%;
	width: 111%;
}

.before-footer .widget-full .instagram-pics li {
	float: left;
	margin-bottom: 0;
	padding-bottom: 0;
	width: 20%;
}

.before-footer .widget-full .instagram-pics li img {
	margin-bottom: -8px;
}

Y nosotros lo dejaremos así: 

/* ## WP Instagram
--------------------------------------------- */

.before-footer .flexible-widgets .wrap {
	padding: 0;
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.flexible-widgets.widget-area .widget.null-instagram-feed {
	float: left;
	padding: 0;
	margin-bottom: 0;
	text-align: center;  /* Sólo en caso de agregar título */
}

.before-footer .widget-full .instagram-pics {
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.before-footer .widget-full .instagram-pics li {
	float: left;
	margin-bottom: 0;
	padding-bottom: 0;
	width: 16.6667%;
}

.before-footer .widget-full .instagram-pics li img {
	margin-bottom: -8px;
}

@media only screen and (max-width: 860px) {
	.before-footer .widget-full .instagram-pics li {
		width: 33.3334%;
	}
}

@media only screen and (max-width: 600px) {
	.before-footer .widget-full .instagram-pics li {
		width: 50%;
	}
}

Cambiamos el menor de los anchos a 16.6667% para que se adapten las 6 imágenes al ancho total de la pantalla. Definimos de nuevo el ancho a 33.3334% para pantallas menores de 860px (tablets) de esta manera se mostrarán en dos grupos de tres. Y de nuevo lo definimos a un ancho de 50% en pantallas menores a 600px (móviles).

Podéis hacer pruebas y jugar con los tamaños y las cantidades de imágenes. 

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?