This thread is resolved. Here is a description of the problem and solution.
Problem:
I would like to Keep the same horizontal order to the cells in a small screen as when viewing it from a Laptop.
Solution:
1) With Bootstrap grid system:
you can add CSS class name " col-xs-*" to each layout cell
https://getbootstrap.com/docs/3.3/examples/grid/
2) Without Bootstrap grid system:
you can use HTML table to format your data:
https://www.w3schools.com/html/html_tables.asp
Relevant Documentation:
https://toolset.com/documentation/user-guides/adding-custom-styling-to-a-layout/#cell
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)
This topic contains 7 replies, has 2 voices.
Last updated by 6 years, 7 months ago.
Assisted by: Luo Yang.
Hello again ToolSet
Tell us what you are trying to do?
I would like to Keep the same horizontal order to the cells in a small screen as when viewing it from a Laptop.
Please see the attached screenshots...
In the "wide.png" all the cells are correctly organized as in the "layout.png"
but in the "small.png" the cells look quite bad.
Could you please let me know what am I doing wrong?
I really like the scrolling feature of the the sample URL bellow.
It keeps the horizontal order but since it's too small anyway, it lets users scroll across to see all the content.
Is it posible to achieve the same with the Layouts extension?
I think it would be an awesome setting.
Is there any documentation that you are following?
None that I found..
Is there a similar example that we can see?
Yes:
hidden link
What is the link to your site?
hidden link
Hello,
Yes, it is possible to setup columns style for extra small screens, for example you can add CSS class name " col-xs-*" to each visual editor cell, see screenshot: extra-small.JPG
More help:
hidden link
Bootstrap grid examples
https://toolset.com/documentation/user-guides/adding-custom-styling-to-a-layout/#cell
Styling individual cells
