Hacer un loop responsive

This support ticket is created hace 2 años, 2 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Etiquetado: Views, Views plugin

Este tema contiene 1 respuesta, tiene 2 mensajes.

Última actualización por Luo Yang hace 2 años, 2 meses.

Asistido por: Luo Yang.

Autor

Mensajes

septiembre 21, 2022 at 3:01 pm #2462291

Rafael Corts

Hola Nigel, tengo este loop de 4 columnas, como debería hacer para que sea responsive y pase de 4 columnas a dos columnas y a una columna en la versión móvil.
Se debería modificar el bucle o lo tengo de hacer por CSS.

Saludos.
Rafa Corts

<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		[wpv-item index=2]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		[wpv-item index=3]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		[wpv-item index=4]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-todos-los-proyectos"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-md-3"></div>
		[wpv-item index=pad-last]
			<div class="col-md-3"></div>
	</wpv-loop>

septiembre 22, 2022 at 3:55 am #2462703

Luo Yang

Hello,

Since you are using Bootstrap grid system, you can follow Booststrap document to setup the CSS class name:
enlace oculto

For example:

<div class="col-md-3 col-sm-6">...</div>

The CSS class name "col-sm-6" will display two columns grid in small device.