AMP Compatibility with STAX Theme

[Lindsey Roe]

Hi There! After noticing my STAX theme page loading really bad on the mobile phone, I went in to my AMP settings in WordPress, only to see this (attached) – that STAX Theme and the Organic Blocks Blundle Plug in AND the Organic Builder Widgets Pro have AMP incompatibility. I’m super discouraged about this! I didn’t even to think to look because this high-powered theme was built for wordpress. Over 60% of my following is on Mobile Phones. Am I understanding all this correctly? Please help! I spent so much time setting this all up (I’m new to it) and am frustrated it loads so poorly on cell phones (overlapping content, content loading side-by-side versus on scroll, font not loading properly, etc). I’ve tried with people on Android and on iOS Apple phones.

Attachments:

You must be logged in to view attached files.

[David Morgan]

Hi Lindsey,

Thanks for reaching out! Based on the screenshot, it appears you are using older versions of the STAX theme and the Organic Blocks plugin. The current version of STAX is 1.4.1, and Organic Blocks is 2.2.8.1.

I would first recommend updating to the latest versions.

Next, can you provide details as to what the specific problems are by revealing the issues in the dropdown arrows. Additionally, can you provide a link to your site, and any screenshots of the specific display issues in mobile?

The theme and plugin are designed to work seamlessly on mobile devices. It’s possible the issues are related to user content that has been added in WordPress, but we’ll need more information to determine whether or not this is the case.

Thanks!

[Lindsey Roe]

Hi David,

Thanks for your reply! I have auto-updates turned on, but right now my installed Organic Blocks Bundle plugin says “Version 2.2.7”. How do I update it? Since Auto-Updates are turned on, I don’t see a manual option. Also, where do I find the current version of STAX that I have? I can’t find it anywhere. I just installed it about a month ago.

My website is: http://www.offthebeatenhook.com

I’ve attached a document (3 pages) with screen shots. Examples of how it looks when it loads properly on some phones and when it doesn’t on others. For example, my husband and I have the exact same phone and it loads okay on my phone (except the profile block) and loads terribly on his phone. Screenshots attached.

Thanks for your help!

Attachments:

You must be logged in to view attached files.

[Lindsey Roe]

Hi David,

Have you had a chance to review my reply above and take a look at the screenshots? Still waiting for your reply. Thanks! Lindsey

[David Morgan]

Hi Lindsey,

I’ve taken a look at the screenshots. Correct me if I’m wrong, but the display issues appear to be mostly isolated to the “Hey There, I’m Lindsey” section. I’ll address the issues below:

1. In the first screenshot examples of the section not loading properly, the screenshot illustrates that the stylesheets are not loading. Hence the reason why fonts and colors are also not appearing correctly in those images. This could be occurring for a number of reasons. However, it’s most likely the result of a caching issue, perhaps with a caching plugin or a CDN service. I would recommend clearing all caches, including browser caches, and possibly disabling any plugins that may be preventing the stylesheet from loading.

2. In the bottom screenshot examples, the styles are loading. However, the portrait image within the section is contained within a Position Block. The Position Block moves the absolute position of an element in the event a user wants to move an image or content to a more specific location on the page. In your case, the Position Block is not necessary. So, you could move the portrait image out of the Position Block altogether.

Alternatively, the Position Block includes an option to reset the position in mobile. I’m assuming that option is not checked in this case. To check the option, click on the Position Block, and scroll down the list of options for the block on the right until you see the “Reset Position In Mobile” option, and check the option. See attached screenshot.

Either option should fix the display issue in mobile.

It should be noted that these mobile display issues are not directly related to the theme. Instead, they are the result of how the blocks are added to the pages. I would recommend using the “List View” when editing blocks, so you can see if you have any unnecessary blocks, and select blocks more easily. See other attached screenshot to see what the List View looks like when toggled on.

I hope this helps. Thanks!

Attachments:

You must be logged in to view attached files.

[Lindsey Roe]

Thank you so much for your detailed response! I’ll take a look at the screenshots and try the suggestions you’ve given and have those mobile users try again to see if it loads properly for them. I really appreciate it. I’ll let you know if I need more assistance. Thanks, Lindsey

[David Morgan]

No problem! 🙂

Let us know if there is anything else.

Thanks!

[Author]

Posts