I have created a website using Toolset and configured a grid layout in a View, which I have adapted for different devices:
Desktop Version:
A three-column grid layout, which looks good on larger screens.
The desktop version is intended for larger devices and works as expected.
Mobile Version:
A separate, customizable copy of the View optimized for smaller screens, where I use a single-column layout.
I have disabled the desktop version for mobile devices to ensure that only the mobile version is displayed.
Tablet Version:
For tablets, I have set up a two-column layout, which serves as an intermediate option between the mobile and desktop views.
Problem:
When I rotate a phone 90 degrees (landscape mode), the desktop version with three columns is displayed instead of the mobile or tablet version. However, this is not suitable, as the three-column layout is too narrow and impractical on a small screen.
It would be much more appropriate if the tablet version (two columns) or even the mobile version (one column) remained active in landscape mode.
My Question:
How can I ensure that when rotating a phone, the correct version (mobile or tablet) remains active and the desktop version does not appear? Is there a way to configure the views so that the display is based on the device type rather than just the screen width?
Thank you very much for your support!
I look forward to your response and possible solutions.