Skip Navigation

[Resolved] Grid view responsiveness

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

Problem: I would like my View's output to be responsive so the multi-column layout is changed to a single-column layout on smaller devices.

Solution: Use the Bootstrap Grid View option in the Loop Wizard to create the markup framework required for a responsive grid View, then use Bootstrap's Grid CSS classes to change the display as needed.

Relevant Documentation:
https://toolset.com/documentation/user-guides/view-layouts-101/
https://getbootstrap.com/docs/3.4/css/

This support ticket is created 5 years, 7 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 2 replies, has 2 voices.

Last updated by catrionaD 5 years, 7 months ago.

Assisted by: Christian Cox.

Author
Posts
#1236651

I am trying to: Display content in three columns on desktop and full width on mobile.

Link to a page where the issue can be seen: hidden link

I expected to see: Content in three columns on desktop and full width on mobile.

Instead, I got: Mobile content squished into three columns.

#1236686

Hi, it looks like this View was created as a table-based grid. The responsive design features included with Toolset work best with the Bootstrap grid View, instead of the table-based grid design. So you should edit this View and click "Loop Wizard" and select the Bootstrap grid style. The basic HTML markup structure will be inserted, then you can add your own responsive layout CSS classes as needed. Let me know if you need assistance with those classes.
https://toolset.com/documentation/user-guides/view-layouts-101/
https://getbootstrap.com/docs/3.4/css/

#1236740

My issue is resolved now. Thank you!