Skip Navigation

[Resolved] Responsive layout

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to display the results of my View in a Bootstrap-style grid that has 6 columns on desktop, 3 columns on tablets, and 2 columns on phones.

Solution: Use the following Bootstrap grid classes on each result in the loop:

<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">

Relevant Documentation: https://getbootstrap.com/docs/3.3/css/#grid

This support ticket is created 6 years, 8 months ago. 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
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 19 replies, has 2 voices.

Last updated by massimoS527 6 years, 8 months ago.

Assisted by: Christian Cox.

Author
Posts
#628070

Okay, I need to be able to log in to see this in a browser to make additional recommendations. Please provide login credentials here so I can take a closer look.

#628394

Okay please check now. I modified the grid as follows:

<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">

Here are the Bootstrap references:
XS: Extra small devices: Most Phones (<768px) col-xs-6 = 2 columns
Small devices: Like Tablets (≥768px) col-sm-4 = 3 columns
Medium devices: Like Desktops (≥992px) col-md-2 = 6 columns
Large devices Desktops (≥1200px) col-lg-2 = 6 columns

Please let me know the pixel width of any display that is not showing the proper number of columns.

#628410

very good, as always !!!

I want to understand the logic of these commands

col-xs-6 = 2 columns
col-sm-4 = 3 columns
col-md-2 = 6 columns
col-lg-2 = 6 columns

can I also apply them to the filter section?

is there a post or a guide?

comunques thanks!

#628510

The documentation for the Bootstrap grid system is here: https://getbootstrap.com/docs/3.3/css/#grid
You can find several examples.

#628659

very good