Website not loading properly on Mobile

Hello,

After registering with Cloudflare, I see, my website is not loading properly on mobile devices- Partial (few images only) loading is happening.
however, it loads properly on mobile.

My Website: https://writingstake.com/

Kindly check and resolve it at the earliest

Hello,

  1. Is minify HTML, CSS and JavaScript enabled to optimize?
  2. You may be using a plugin that is not compatible with cloudflare.
  3. You can use debug and console mode in the browser.
  4. This may be from your mobile site template.

Analyze your site in the mobile version:

Thanks for the response; it was all good till yesterday 17th Feb; the issue started few hours back. I have not installed any plugins in the meantime.
Can you tell more about how to debug this issue?

Thank you!

I believe it could be due to mobile data ISP having some cache, either do you have some privacy settings or adblock?

As far as I have checked, everything loads fine at my end (both desktop and mobile).

Many thanks for your response!
However, I don’t have any AdBlock in mobile and also I tried clearing all cache and cookies; still the same problem.
Can you let me know which browser are you using in mobile?

Please check the attached screenshot of how it loads partially (only Icon) in mobile
Mobile Page Appearance

Could it be due to CSS and JS? You are using WordPress, moreover Elementor Builder Plugin.

I can confirm the same using Google Chrome on Desktop and Mobile.

Also I got error for the next resource:

Request URL: https://cdn.statically.io/css/writingstake.com/wp-content/cache/min/1/7f72717597ed3b6a6fef0afa838cd6e9.css
Request Method: GET
Status Code: 400 
Remote Address: 151.101.2.217:443
Referrer Policy: strict-origin-when-cross-origin

accept-ranges: bytes
access-control-allow-origin: *
access-control-expose-headers: *
cache-control: public, max-age=300
content-length: 722
content-type: text/html
date: Thu, 18 Feb 2021 16:35:24 GMT
server: statically
strict-transport-security: max-age=31536000; includeSubDomains; preload
timing-allow-origin: *
x-cache: MISS
x-content-type-options: nosniff
x-served-by: cache-fra19165-FRA

Thank you so much!

Can you kindly guide me on how to resolve it?

In case it is JS/CSS issue?
In case it is any other issue?

Thank you!

Can you try adding:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, width=device-width, user-scalable=yes, minimal-ui">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">

Moreover, I found your issue for not showing up the content on mobile (line 79.):

.elementor-invisible {
    visibility: hidden;
}

When I remove it or put to visible, I see the text, and sharing boxes on the bottom of the screen, etc. :wink:

Either some JavaScript code does not fire and execute to change from hidden to visible, or to switch the CSS class on the element from one of the elements above it.

See on the screenshot below:

This element has it, obviously the Elementor does not fire to remove it or change it?
Also, the “darker screen” is shown - like an black overlay over all of it from some other element?

Thank you so much for your detailed explanation!

It helps me resolve this issue!

Many Thanks again!
Really appreciate!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.