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, 9 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.

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, 9 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