Skip Navigation

[Resolved] A page does not show properly on mobile

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

Last updated by andreasP-4 3 years, 10 months ago.

Assisted by: Christian Cox.

Author
Posts
#1672359

Hello again.

I am struggling to find why the page (custom post type) I am trying to set up does not appear as it should on mobile.

The page is: hidden link and if you view it both on desktop and mobile you will see the differences: images do not appear, colors on buttons become grey, the fonts are not applied, the tabbed content on bottom shows etc.

What could be the problem? Am I doing something wrong or is it something else?

Thank you,
Andreas

#1672655
Screen Shot 2020-06-22 at 4.25.36 PM.png

Hi, I don't know what it should look like so I'm not sure what is wrong. I see no images appear in desktop mode - here is a screenshot. There are a couple of errors in the browser console, so I'm not sure what is going on. Can you go to Settings > General and make sure your site URLs are listed as HTTPS?

#1673249

Christian, thank you for your response.

Indeed the WordPress address was hidden link and the Site address was hidden link

I changed both to hidden link but I still get the same issue.

This is how I see it on desktop: hidden link but on mobile I get this: hidden link

Thanks for your time!
Andreas

#1673637

I'm still seeing the same thing when I load the site, not what you have included in your screenshots. I see these errors in the console, related to mixed content:

(index):132 Mixed Content: The page at '<em><u>hidden link</u></em>' was loaded over HTTPS, but requested an insecure stylesheet '<em><u>hidden link</u></em>'. This request has been blocked; the content must be served over HTTPS.
2siteground-optimizer-combined-js-0bfa5d9ce8f396dfd11f4078145bb41d.js:1 Uncaught SyntaxError: Identifier 'wpvViewHead' has already been declared
(index):1 Mixed Content: The page at '<em><u>hidden link</u></em>' was loaded over HTTPS, but requested an insecure stylesheet '<em><u>hidden link</u></em>'. This request has been blocked; the content must be served over HTTPS.

Maybe there is a difference for logged-in Users and logged-out Users? Would you like to share login credentials?

#1673693

Hello, Christian. Thank you for the reply.

Yes, you are absolutely right! I logged in from mobile and the page showed the same it shows on desktop!

Any ideas what could be causing this? Do you still need login details to investigate further? (Waqar is currently checking another issue using admin credentials)

Thank you for your time!
Andreas

#1675523

I can use Waqar's credentials for now. I temporarily deactivated Jetpack and SG Optimizer and the page began to display correctly for Guests, so my guess is there is a caching or optimization issue. I'm not really an expert with either of those two systems, so you may need to play around with the configurations until you can find the culprit. In general, we strongly suggest you do not minify, concatenate, or otherwise obfuscate Toolset's JavaScript and CSS files. I would begin by checking those configurations and adding exclusions as needed so that the files loaded by Toolset are not included in those optimization routines. We have found that this file MUST be excluded for functional reasons:

/wp-content/plugins/types/vendor/toolset/toolset-common/visual-editor/res/js/codemirror/lib/codemirror.js

Plus these if you decide to use Toolset Forms:

/wp-content/plugins/types/vendor/toolset/toolset-common/toolset-forms/js/validation.js
/wp-content/plugins/types/vendor/toolset/toolset-common/toolset-forms/js/conditional.js
/wp-content/plugins/types/vendor/toolset/toolset-common/toolset-forms/js/recaptcha-v2/api.js

But again, we recommend you exclude all Toolset files from optimization.

On a side note - I deactivated the Toolset Layouts plugin for you. You are using the Block Editor to create your template designs, so there's really no need for the Layouts plugin. I recommend you delete it unless you have a specific need for Layouts, but in general you can do just about everything with Content Templates instead in the Block Editor. Using both systems at the same time can cause problems and confusion, so it's best to pick one and stick with it. Furthermore, we will continue to add new features in Blocks but probably not in Layouts. Hope this is clear, let me know if you have additional questions about it.

#1676403

Christian, I can't thank you enough. You dealt with this like it was your own website and your own issue!

I will look into these and fix them. I will get back to you if needed, but I don't think so. I will also follow your kind advice regarding Layouts.

Many many thanks!
Andreas

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.