Hacer un loop responsive

This support ticket is created Il y a 2 années et 3 mois. 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.

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)

Marqué : Views, Views plugin

Ce sujet contient 1 réponse, a 2 voix.

Dernière mise à jour par Luo Yang Il y a 2 années et 3 mois.

Assisté par: Luo Yang.

Auteur

Publications

septembre 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>

septembre 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:
lien caché

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.