Skip Navigation

[Resolved] View not showing up correctly on desktop browser (appears as mobile view)

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

Last updated by tomG-10 2 years, 2 months ago.

Assisted by: Luo Yang.

Author
Posts
#2575329
screenshot0317-wrong.png
screenshot0317-correct.png

Tell us what you are trying to do?
I've created a view with Toolset that pulls in dynamic content to provide a listing of custom posts in a grid format on desktop. When I view the View by itself, it looks great. But when I look at the actual page on my site that contains the view on a desktop browser, the listing shows up in a single column. It is showing up as though it's in mobile view.
Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
hidden link

#2576301

Christopher Amirian
Supporter

Languages: English (English )

Hi there,

There seems to be a Javascript error going on your website front end that you need to find the source.

To do that please first check and see if the design works ok with only Toolset or not. Please follow the steps below:

- IMPORTANT STEP! Create a backup of your website.
- Switch to the default theme such as "TwentyTwenty" by going to "WordPress Dashboard > Appearance > themes".
- Go to "WordPress Dashboard > Plugins" and deactivate all plugins except Toolset and its add-ons.
- Check if you can still recreate the issue.
- If not, re-activate your plugins one by one and check the issue each time to find out the plugin that causes the problem.

Thanks.

#2577139

Hi. I created a staging site and changed it to use the Twenty-Twenty One theme and deactivated all of the plugins except for Toolset. The problem remains the same - the list looks fine, laid out in a grid, when I look at the View. But when I look at the page that CONTAINS the view, the list is laid out in a single column.

#2577315

Hello,

I have checked the URL you mentioned above, l see lots of JS errors:

(index):7 Uncaught ReferenceError: toolsetCommonEs is not defined
at (index):7:14261
(anonymous) @ (index):7
(index):7 Uncaught ReferenceError: toolsetCommonEs is not defined
at (index):7:36935
(anonymous) @ (index):7
(index):10 Uncaught ReferenceError: toolsetCommonEs is not defined
at (index):10:2738
(anonymous) @ (index):10
(index):10 Uncaught ReferenceError: toolsetCommonEs is not defined
at (index):10:3241
(anonymous) @ (index):10
(index):10 Uncaught ReferenceError: toolsetCommonEs is not defined
at (index):10:3418
(anonymous) @ (index):10
(index):10 Uncaught ReferenceError: toolsetCommonEs is not defined
at (index):10:26092
(anonymous) @ (index):10
frontend-modules.min.js?ver=3.11.5:2 Uncaught ReferenceError: jQuery is not defined
at Module.extend (frontend-modules.min.js?ver=3.11.5:2:11557)
at 2640 (frontend-modules.min.js?ver=3.11.5:2:14124)
at __webpack_require__ (webpack.runtime.min.js?ver=3.11.5:2:153)
at 5955 (frontend-modules.min.js?ver=3.11.5:2:14437)
at __webpack_require__ (webpack.runtime.min.js?ver=3.11.5:2:153)
at 6412 (frontend-modules.min.js?ver=3.11.5:2:5754)
at __webpack_require__ (webpack.runtime.min.js?ver=3.11.5:2:153)
at frontend-modules.min.js?ver=3.11.5:2:36408
at webpackJsonpCallback (webpack.runtime.min.js?ver=3.11.5:2:4611)
at frontend-modules.min.js?ver=3.11.5:2:61
Module.extend @ frontend-modules.min.js?ver=3.11.5:2
2640 @ frontend-modules.min.js?ver=3.11.5:2
__webpack_require__ @ webpack.runtime.min.js?ver=3.11.5:2
5955 @ frontend-modules.min.js?ver=3.11.5:2
__webpack_require__ @ webpack.runtime.min.js?ver=3.11.5:2
6412 @ frontend-modules.min.js?ver=3.11.5:2
__webpack_require__ @ webpack.runtime.min.js?ver=3.11.5:2
(anonymous) @ frontend-modules.min.js?ver=3.11.5:2
webpackJsonpCallback @ webpack.runtime.min.js?ver=3.11.5:2
(anonymous) @ frontend-modules.min.js?ver=3.11.5:2
frontend.min.js?ver=3.11.6:2 Uncaught ReferenceError: elementorModules is not defined
at 371 (frontend.min.js?ver=3.11.6:2:10298)
at __webpack_require__ (webpack-pro.runtime.min.js?ver=3.11.6:2:149)
at 5931 (frontend.min.js?ver=3.11.6:2:12263)
at __webpack_require__ (webpack-pro.runtime.min.js?ver=3.11.6:2:149)
at 5469 (frontend.min.js?ver=3.11.6:2:13220)
at __webpack_require__ (webpack-pro.runtime.min.js?ver=3.11.6:2:149)
at 3515 (frontend.min.js?ver=3.11.6:2:2648)
at __webpack_require__ (webpack-pro.runtime.min.js?ver=3.11.6:2:149)
at 4774 (frontend.min.js?ver=3.11.6:2:2360)
at __webpack_require__ (webpack-pro.runtime.min.js?ver=3.11.6:2:149)
371 @ frontend.min.js?ver=3.11.6:2
__webpack_require__ @ webpack-pro.runtime.min.js?ver=3.11.6:2
5931 @ frontend.min.js?ver=3.11.6:2
__webpack_require__ @ webpack-pro.runtime.min.js?ver=3.11.6:2
5469 @ frontend.min.js?ver=3.11.6:2
__webpack_require__ @ webpack-pro.runtime.min.js?ver=3.11.6:2
3515 @ frontend.min.js?ver=3.11.6:2
__webpack_require__ @ webpack-pro.runtime.min.js?ver=3.11.6:2
4774 @ frontend.min.js?ver=3.11.6:2
__webpack_require__ @ webpack-pro.runtime.min.js?ver=3.11.6:2
2 @ frontend.min.js?ver=3.11.6:2
__webpack_require__ @ webpack-pro.runtime.min.js?ver=3.11.6:2
(anonymous) @ frontend.min.js?ver=3.11.6:2
webpackJsonpCallback @ webpack-pro.runtime.min.js?ver=3.11.6:2
(anonymous) @ frontend.min.js?ver=3.11.6:2
waypoints.min.js?ver=4.0.2:1 Uncaught TypeError: Cannot read properties of undefined (reading 'each')
at waypoints.min.js?ver=4.0.2:1:11074
at waypoints.min.js?ver=4.0.2:1:11537
(anonymous) @ waypoints.min.js?ver=4.0.2:1
(anonymous) @ waypoints.min.js?ver=4.0.2:1
core.min.js?ver=1.13.2:5 Uncaught ReferenceError: jQuery is not defined
at core.min.js?ver=1.13.2:5:88
at core.min.js?ver=1.13.2:5:96
(anonymous) @ core.min.js?ver=1.13.2:5
(anonymous) @ core.min.js?ver=1.13.2:5
datepicker.min.js?ver=1.13.2:9 Uncaught ReferenceError: jQuery is not defined
at datepicker.min.js?ver=1.13.2:9:97
at datepicker.min.js?ver=1.13.2:9:105
(anonymous) @ datepicker.min.js?ver=1.13.2:9
(anonymous) @ datepicker.min.js?ver=1.13.2:9
mouse.min.js?ver=1.13.2:9 Uncaught ReferenceError: jQuery is not defined
at mouse.min.js?ver=1.13.2:9:97
at mouse.min.js?ver=1.13.2:9:105
(anonymous) @ mouse.min.js?ver=1.13.2:9
(anonymous) @ mouse.min.js?ver=1.13.2:9
slider.min.js?ver=1.13.2:9 Uncaught ReferenceError: jQuery is not defined
at slider.min.js?ver=1.13.2:9:107
at slider.min.js?ver=1.13.2:9:115
(anonymous) @ slider.min.js?ver=1.13.2:9
(anonymous) @ slider.min.js?ver=1.13.2:9
jquery.ui.touch-punch.js?ver=0.2.2:11 Uncaught ReferenceError: jQuery is not defined
at jquery.ui.touch-punch.js?ver=0.2.2:11:978
(anonymous) @ jquery.ui.touch-punch.js?ver=0.2.2:11
mediaelement-migrate.min.js?ver=6.1.1:1 Uncaught ReferenceError: jQuery is not defined
at mediaelement-migrate.min.js?ver=6.1.1:1:1183
(anonymous) @ mediaelement-migrate.min.js?ver=6.1.1:1
wp-mediaelement.min.js?ver=6.1.1:1 Uncaught ReferenceError: jQuery is not defined
at wp-mediaelement.min.js?ver=6.1.1:1:899
(anonymous) @ wp-mediaelement.min.js?ver=6.1.1:1
wp-util.min.js?ver=6.1.1:2 Uncaught ReferenceError: jQuery is not defined
at wp-util.min.js?ver=6.1.1:2:1384
(anonymous) @ wp-util.min.js?ver=6.1.1:2
wp-playlist.min.js?ver=6.1.1:1 Uncaught ReferenceError: jQuery is not defined
at wp-playlist.min.js?ver=6.1.1:1:3427
(anonymous) @ wp-playlist.min.js?ver=6.1.1:1
views-frontend.js?ver=3.6.5:1 Uncaught ReferenceError: jQuery is not defined
at 224 (views-frontend.js?ver=3.6.5:1:2157)
at r (views-frontend.js?ver=3.6.5:1:110)
at 222 (views-frontend.js?ver=3.6.5:1:962)
at r (views-frontend.js?ver=3.6.5:1:110)
at views-frontend.js?ver=3.6.5:1:902
at views-frontend.js?ver=3.6.5:1:913

Please share your staging website credentials + FTP access in below private message box, I need to deactivate plugins/theme in it

#2578137
Use-existing-View.jpg

Thanks for the information.
In the problem page "Slabs":
hidden link

You are using Blocks editor to design above page, I assume you are going to display the existed post view in it.

If it is, you just need to add a Toolset view block, choose the existed post view, see my screenshot Use-existing-View.jpg

I have tried it in your staging website, it works fine, see the result here:
hidden link

#2578177

Thank you. So when I try to recreate what you did on another test page on the staging site you accessed, I got the same result - the grid shows up as a grid.
hidden link

When I try to recreate the page by following your instructions on yet another staging site - one that does NOT have the theme changed and the plugins deactivated - I go back to having the original problem. I created this test page using the blocks editor instead of Elementor page builder as I originally had used, but the theme is my original theme and the plugins are activated. It shows up wrong.
hidden link

So that means the problem is likely related to a conflict with one of the deactivated plugins or my original theme, correct?

#2578187

Toolset Blocks is based on WordPress built-in page builder: Blocks editor.

It is not recommended to use it with other page builder: Elementor page builder, it will conduct unexpected results.

In order to use Toolset post views in other page builders, you can setup the post view with legacy editor:
https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Then put the post view's shortcode [wpv-view] into other page builder:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-view

#2578519

My issue is resolved now. Thank you!