Docs

[444media]

I am having a number of issues with how the home page of my site (ccrcofamerica.com) looks on mobile (viewing both in the desktop emulator within the theme and on my iPhone 6):

1. Loads very slowly. Thought maybe it was my connection, but other sites load fast and fine. Its just this site that loads slow.

2. None of the Timeline (Cornerstone element) elements are working. Does not show text of each timeline section nor does it show the proper image. It just oddly shows a 400×200 blue placeholder block instead of the image I have uploaded. Furthermore, there are 3 images and timeline sections, but on mobile it’s showing 4 blue boxes as placeholders.

3. Slider Revolution slide above masthead not showing. I had “Hide Slide On Mobile” turned ON, when I had some issues with the slider on mobile…and I got an error on the page (on mobile) above the mast (screen shot attached. Red text on white screen). But it said to “put JS Includes to Body”, so I did that in Troubleshooting. But I don’t know how to remove “double jquery.js include”

So I turned OFF “Hide Slide On Mobile” but now it just doesn’t show/load at all.

So either way, the Revolution Slider element above the masthead is not showing on mobile despite what steps I’ve taken.

4. Neither of the two counter features (Cornerstone counter element) work on mobile. They just sit at 0.

5. Text size seems to vary on mobile view. “Mission Statement” text in mobile view is very large, but fine on desktop. It’s also the same size text as other text elements on the home page, but those text elements appear fine in mobile.

6. Sometimes the navigation menu items are displaying at the top when I have not clicked the menu bar. See screen shot.

Screenshots attached of above issues

[444media]

This reply has been marked as private.

[Rad]

Hi there,

1. Yes, it’s low and according to network logs, it’s your PNG images and googles maps that are causing it. You should compress and optimize your images. Please check this https://community.theme.co/kb/performance/

2. It’s due to section’s visibility. The demo you currently use and edited is the one that displays different content on mobile and desktop. When you inspect your section, it should give you the option HIDE BASED ON SCREEN WIDTH, and you should change that too according to your preference.

Since you’re on mobile, you’re not able to find the sections visible on mobile, what you need is to click mobile icon beside the save button. Then click the device icon you wish to view the preview. You may also try the skeleton mode to view all sections ( the icon beside the mobile icon).

3. The slider works on my end, it could be cache on your end when you changed its setting.

4. The counter works on my end too, there could be a javascript that affects both the slider and counter but gone now.

5. It works too, that text is controlled by responsive text feature which is also a javascript. Hence, could be related to 3# and 4#

6. Works okay too, perhaps, the resources aren’t full loading on your end (related to #3, #4, and #5).

Try clearing your browser cache first 🙂

Thanks!

[Author]

Posts