@nnn946
Thanks for reporting. Indeed that happens in themes that do not well support tables. Footnotes’ reference containers are tables rather than stacked divs. Twenty Twenty displays tables well on mobile too, while another widespread theme I’m currently running tests under does not. The reference container depends on themes’ mobile friendliness. Not to shift responsibility. We’ve tried hard to fix various display bugs, including site-specific and theme-specific ones. I failed to fix our reference container in themes that render it illegibly on mobiles because it is a table. We could add an option to choose between a table and a stack of divs, but the latter has other constraints, e.g. it doesn’t flow automatically depending on writing direction.
If you would like to share some theme details or even a link to an example page, we’ll strive to get closer to a solution tailored to your needs.
Thank you for your appreciation!
@nnn946
Please don’t share download links to commercial software here.
Your post was hidden.
If you need to contact the moderators about this then you can do so via the Slack #forums channel.
To use that channel you need a Slack account. You can obtain one via these instructions.
Slack – https://make.ww.wp.xz.cn/chat/
When you contact the #forums channel, inform them what your ww.wp.xz.cn forum user ID is. That will help the moderators find your account and ascertain what the issue is.
If you do use Slack do not direct message me or any other moderator. Use the #forums channel and any moderator there can assist you.
Thread Starter
nnn946
(@nnn946)
@pewgeuges the theme is “Flatsome” – let me know if you need access to the files.
@nnn946
Thank you. The only Flatsome files I can have access to for free are those in a saved web page using the theme. Usually the Footnotes plugin’s public.css is in the folder. I’ll open this and try to get the footnotes right, then add what can be, and forward other fixes for your personal use here.
Fixes overstepping the plugin’s possibilities might eventually be submitted to the editor.
May you please direct me to an example page using Footnotes?
Thread Starter
nnn946
(@nnn946)
@nnn946
Thank you. I’ve checked this page in Google Chrome mobile view emulator in the developer tools (as I can’t check on a real device), and it displays well, the whole page, including the reference container, with backlinks easy to click. However, on the Google Mobile Friendly Test, it looks differently: https://search.google.com/test/mobile-friendly?id=5Ioto4rp9_o_pBO3wp2kTA
The results of Google Search Console may be problematic and raised criticism followed by long discussion: https://support.google.com/webmasters/thread/3599862?hl=en
Independently of the test, did you see any problem when visiting this page on a mobile device? If not, there is nothing to worry about, because Google Search is said to not penalize websites based on mobile friendliness: https://www.sistrix.com/ask-sistrix/google-updates-and-algorithm-changes/mobile-friendly-ranking-factor-update/does-google-punish-websites-that-are-not-mobile-friendly/
@nnn946
I’ve now checked several pages using Footnotes, and they are assessed as mobile friendly by Google Mobile Friendly Test. Among these pages, one has a theme where the references container is too small in the Google Chrome developer tools mobile view emulator, but that was not a reason to revert the result.
Now I’ve checked another page of the same blog https://sanpedrohealing.com/san-pedro-cactus-trip/ in Google MFT. It displays well and is mobile friendly, as you reported, not so the one using Footnotes. This displays only in the left screen half, the header in the upper left corner, the start of the content in the lower left corner, and nothing between.
We need to investigate why pages in Flatsome are distorted when Footnotes is used therein. For now, I suspect that Flatsome’s display depends on something that is disabled by Footnotes. That could either be a style rule or a script. Style rules in Footnotes’ public.css have so specific selectors they cannot affect other elements. I’ve just checked them all, and there aren’t many.
So the problem may be scripts. In our new development version 2.1.1d8 currently available at https://downloads.wp.xz.cn/plugin/footnotes.zip, I’ve commented out all script loads to check if it fixes a theme incompatibility. To get the tooltips display again, please enable alternative tooltips, in the plugin’s dashboard > Customize > Mouse-over box > Use alternative tooltip implementation -> Yes.
Looking forward.
-
This reply was modified 5 years, 6 months ago by
pewgeuges.
-
This reply was modified 5 years, 6 months ago by pewgeuges.
-
This reply was modified 5 years, 6 months ago by pewgeuges.
Thread Starter
nnn946
(@nnn946)
Hello, I installed the 2.1.1d8. And I submitted to google console to “Validate Fix”, unfortunately it still won’t work.
Hello @nnn946,
Thanks a lot for your feedback/report, and my apologies for being late responding. I’ve become able to test how it looks and works on a smartphone, and the page you linked works and looks/feels perfectly in Chrome for Android, in Firefox for Android, in Opera for Android, in Edge for Android and last but not least in Brave for Android. Links in referrers and backlinks work, tooltips show up—although there is one problem across all five browsers: jQuery doesn’t resize tooltips to the screen/window edge like it does in desktop browsers. I’ve checked that you don’t use the alternative tooltips that can’t resize and are available for websites where jQuery tooltips don’t show up.
I’m completely clueless about why the Mobile Friendly Test in Google’s Search Console is unable to properly render this page. The less as Google’s mobile view emulator in the developer tools of Chrome’s desktop version displays the page perfectly too.
We witnessed a bug affecting Footnotes’ scroll and expand/collapse functions in pages loaded by AJAX in Chrome for Android, Edge for Android and Firefox for Android, but not in Brave for Android nor in Opera for Android. That bug has been reported to Google too. All these bugs line up to provide us with textbook examples of big brands failing to handle today’s technology in all its complexity.
I’m sorry that you are having this problem with the Search Console. We’ll probably report it at our level too, although we don’t have the audience at Google that you have as the owner of the impacted website.
I’m sorry too for the tooltip font size issue I introduced in 2.1.1 that you tested as 2.1.1d8. It will be solved in upcoming 2.1.4 by adding font size to settings with legacy as default. The fix is already in preview at https://downloads.wp.xz.cn/plugin/footnotes.zip where currently 2.1.4d9 is available.
I hppe that now, as the bug in Search Console Mobile Friendly Test is known by Google, your website’s ranking in search results served on mobile will be corrected. Also I note that it affects none of your visitors, given the display bug is limited to the Console, and the five most popular browsers tested on the most common mobile OS are free from it. As a consequence, I think that this topic can be marked as resolved?
All the best,
@pewgeuges
