Hacer un loop responsive

This support ticket is created vor 1 Jahr, 7 Monate. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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)

Tags: Views, Views plugin

This topic contains 1 Antwort, has 2 Stimmen.

Last updated by Luo Yang vor 1 Jahr, 6 Monate.

Assisted by: Luo Yang.

Author

Artikel

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

September 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:
hidden link

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.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.