I recently received a warning in the Google Search Console, for mobile usability issues.
I've attached a screenshot to give an example.
As you can see, the image is not filling the screen size, and so I'm wondering if this is a viewport issue?
I tried changing the viewport as follows;
From: <meta name="viewport" content="width=device-width, initial-scale=1" />
To: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
However, the Google Search console is still reporting mobile usability errors, and the image looks the same, with the page squished up into the corner of the screen.
Also, if viewing the website from chrome, I get a horizontal scrolling bar, with grey area. Oddly enough, I don't get this on firefox.
Any ideas on what may be the cause?
what theme are you using?
out of curiosity, try the over-simplified:
<meta name="viewport" content="width=device-width"/>
and report back.
@Deaks - Reseller theme.
@drewactual - No change.
add to your primary css:
@media (max-width: 850px) {
body{width:100vw!important; max-width:100%!important;}
}
use whatever standard your CSS currently uses for the @media width (e.g. 750px, 850px, 970px, ect)... if 'body' doesn't catch it, maybe using #wrapper will...
No luck with either body or wrapper.
I would ask in the themes support topic, as they will be able to assist better with making the theme more responsive as they are claiming it is
I tried that. Sent a message two days ago, and haven't received a response.
You sent a message demanding someone help you and only you, or you posted in the theme's topic where everyone can benefit?
Your site is Crown Sports?
It seems to be responsive when I test it using MS Edge dev tools (all available devices).
@Chen Zhen - Yeah, it seems to be working okay from desktop and mobile, albeit mobile is giving me a horizontal scroll bar on chrome.
I don't know enough about coding to know exactly what's going on.
I had two more boards pop up on the Google mobile usability error today. All for the same issue, as shown in my original post.
As I mentioned you need to ask the theme author if I mind correctly they also have their on support site so try posting on their the issue in this case its the theme and not the software.
On the mobile friendly test page, on the top of the left pane where it says, "Page Loading Issues" Click the view details link. It will give you some more info on what's being blocked, and show you the mixed content errors I mentioned to you in the other topic.
I don't see a horizontal scrollbar anywhere, except on the responsive google ad at the bottom when I resize the window, but that's normal, and wouldn't do this on a fresh page load.
There's your problem:
Quote6 page resources couldn't be loaded
https://googleads.g.doubleclick.net/pagead/html/r20200624/r20190131/zrt_lookup.html
Googlebot blocked by robots.txt
https://graph.facebook.com/?id=http%3A%2F%2Fcrown-sports.com%2Findex.php&fields=og_object%7Bengagement%7D&callback=_ate.cbs.rcb_32jt0
Googlebot blocked by robots.txt
https://graph.facebook.com/?id=https%3A%2F%2Fcrown-sports.com%2Findex.php&fields=og_object%7Bengagement%7D&callback=_ate.cbs.rcb_dxjr0
Googlebot blocked by robots.txt
https://pagead2.googlesyndication.com/pagead/js/r20200624/r20190131/show_ads_impl_fy2019.js
Googlebot blocked by robots.txt
https://partner.googleadservices.com/gampad/cookie.js?domain=crown-sports.com&callback=_gfp_s_&client=ca-pub-9948503092475110
Googlebot blocked by robots.txt
https://z.moatads.com/addthismoatframe568911941483/moatframe.js
Googlebot blocked by robots.txt
Mixed Content: The page at 'https://crown-sports.com/index.php' was loaded over HTTPS, but requested an insecure font 'http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff'. This request has been blocked; the content must be served over HTTPS.
@lurkalot - You don't see a horizontal scroll bar form mobile chrome? I do.
@Antechinus - Not sure why all of that would be blocked by robots.txt. This is all I have in my robots file.
User-agent: *
Disallow: /test_site/
Disallow: https://crown-sports.com/index.php?action=stats
Sitemap: https://crown-sports.com/sitemap.xml
Quote from: jbridges87 on June 30, 2020, 10:40:56 AM
@lurkalot - You don't see a horizontal scroll bar form mobile chrome? I do.
Not on my Android in Chrome, or Edge, no, it looks fine. Looks fine on my laptop too, apart from that rogue TP Expand/Collapse icon which probably needs turning off if you don't use it. Looks like the AddThis or Paypal icons are interfering with it anyway, because it becomes inactive once they load.
overflow-x: hidden;
Adding the above to your body CSS for mobile will stop the horizontal scrolling.
I was able to duplicate your default screen size issue last night while testing.
I will look at a solution for you when I am at home later this evening if not resolved at that time.
Also show a screenshot of installed mods.
Are the social media icons/links part of the theme or a mod? I ask this because they are causing some of the errors noted in other posts above due to mixed protocols on what is supposed to be a secure page. This may not be relevant to your reported issue but just saying..
I saw that overflow command mentioned a few times during my search on the problem. A few people mentioned that it isn't a true fix because it just hides the problem?
I honestly don't know one way or the other. I'm willing to try it out.
The social icons at the bottom of the articles are built into Tiny Portal, and the social/donation icons on the forum are from the tool, AddThis.
Mod list attached.
Thanks for checking on this.
Uninstall the Optimus modification & test your mobile layout afterward.
Actually it's only enabling these options that seem to cause problems:
QuoteDisplay board description as the meta-tag description
Display topic description as the meta-tag description
If you disable those options & test your forum it should be ok.
I haven't looked at the code of the mod but perhaps there is an issue with how those options have been applied.
After reading the notation underneath those settings it seems another mod is required to make them work properly.
If you want those settings enabled, install this modification: https://custom.simplemachines.org/mods/index.php?mod=3012
Imo ignore its "core" theme install errors since I gather you do not use it.
Adjust its settings to your preference.
When I messed with that above mod as stated I got a test site to pass the Google mobility test.
However, Lurkalot pointed out the issue for how it is displaying...
Quote from: lurkalotLooks like the AddThis or Paypal icons are interfering with it anyway, because it becomes inactive once they load.
I don't see the "AddThis" mod in your screenshot.
There seems to be code added to the page from AddThis that is breaking the page.
Here are some points of interest FYI:
- can't have the <iframe> tag after the "body" tag
- can't have <style> tag within the <body> tag (has to be in the head tag)
- div id _atssh has absolute position and also contains an iframe that has absolute position
.. the last point seems to be the main problem. The div has display: hidden but it is still messing up the layout. When I remove all of the above issues, the page functions properly.
Imo also update Tiny Portal to the latest version.
@lurkalot - Yes, I have all of the panel expand/collapse options turned off. I need to locate which panel is displaying that little box, but it shouldn't be active. I set it that way.
@Chen Zhen - I've had the Optimus mod installed for quite a while now with no issue. I'm not sure how it could have become the culprit out of nowhere?
I did try turning off the ''Display board description as the meta-tag description', as you suggested, but it didn't seem to make a difference.
My main concern is just resolving the google errors at this point.
Perhaps I should just add the overflow-x: hidden;
I could always turn off the tools for addthis as a test as well, although, the code would still be on the site, I think if I turn the tool off, the code shouldn't load? Not really sure on that one...
Quote from: jbridges87 on July 01, 2020, 12:01:22 AM
@lurkalot - Yes, I have all of the panel expand/collapse options turned off. I need to locate which panel is displaying that little box, but it shouldn't be active. I set it that way.
Best way to turn off all the Collapse/Expand icons is
TinyPortal Admin > Settings > Allow the panels to be collapsed?
Yes /
No Save.
Quote from: jbridges87 on July 01, 2020, 12:01:22 AM
My main concern is just resolving the google errors at this point.
I could always turn off the tools for addthis as a test as well, although, the code would still be on the site, I think if I turn the tool off, the code shouldn't load? Not really sure on that one...
My sites fail the Google Mobile test when AddThis is enabled. And Pass the test when I disable AddThis. ;)
That was the panel setting! Turned off now. Thanks
So I was playing around last night, and discovered if I turn off the tools for AddThis Social/Donate buttons, then horizontal scroll bar goes away. I then tested it out on the Google Search Console, and confirmed the board pages then showed as mobile friendly.
Then I went ahead and re-enabled the social icons, but left the donate disabled, and everything was still good.
Once I re-enabled the donate buttons, the issue returned, so it's something to do with those specifically.
Now, I did make some modifications to the css to get those social icons moved to the right, and to display properly.
This (https://www.simplemachines.org/community/index.php?topic=573660.20) is the thread where all the changes were discussed. The exact changes I made were from reply #24, and reply #31.
Perhaps a few of those settings just need tweaking?
Quote from: jbridges87 on July 01, 2020, 01:40:09 PM
That was the panel setting! Turned off now. Thanks
So I was playing around last night, and discovered if I turn off the tools for AddThis Social/Donate buttons, then horizontal scroll bar goes away. I then tested it out on the Google Search Console, and confirmed the board pages then showed as mobile friendly.
Then I went ahead and re-enabled the social icons, but left the donate disabled, and everything was still good.
Once I re-enabled the donate buttons, the issue returned, so it's something to do with those specifically.
Now, I did make some modifications to the css to get those social icons moved to the right, and to display properly.
This (https://www.simplemachines.org/community/index.php?topic=573660.20) is the thread where all the changes were discussed. The exact changes I made were from reply #24, and reply #31.
Perhaps a few of those settings just need tweaking?
You still get these mixed content warnings when you test on, https://www.whynopadlock.com/ and content is being blocked.
QuoteMixed Content - Errors
Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded on line: 359 of https://crown-sports.com/index.php.
This URL will need to be updated to use a secure URL for your padlock to return.
Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded via the javascript file: https://s7.addthis.com/js/300/addthis_widget.js on line 69. The insecure URL may not be directly contained in the script file and may exist elsewhere.
You may need to contact your web hosting provider for assistance.
This URL will need to be updated to use a secure URL for your padlock to return
Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded via the javascript file: https://s7.addthis.com/static/layers.33f5b85045a5f2308467.js on line 0. The insecure URL may not be directly contained in the script file and may exist elsewhere.
You may need to contact your web hosting provider for assistance.
This URL will need to be updated to use a secure URL for your padlock to return.
Hard Failure
A file with an insecure url of "http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff" was loaded, via a CSS file. You may need to contact your web hosting provider for assistance.
This URL will need to be updated to use a secure URL for your padlock to return.
I'm not sure if there's anything I can do about the two http URLs that are being loaded by AddThis, as that's coming from their end, I think.
I could reach out to my host about the other two though, as I do have SSL, and should be able to get those links update to https.
Or perhaps I could make these changes myself?
Alright, so I just ran a test by removing all of the custom code that @Antechinus helped me with, and the problem with the horizontal scroll bar remained, so the code doesn't seem to be the issue.
Could it be something in the script that AddThis is running?
The only way I can get it to go away at this point is to disable the tipjar toolbar.
I'm curious about how you added AddThis to your forum installation.
Is it the same version of the outdated mod that is available in the SMF customization section?
That mod in its current state will not install on SMF 2.0.17 nor many previous versions of SMF which is why I am asking.
It was superseded by Suki's "Share This Topic" mod from what I've read in its comments although that mod also seems outdated (8 years).
ref. https://www.simplemachines.org/community/index.php?topic=375136.msg3251985#msg3251985
The AddThis mod was not in your screenshot of installed mods that was posted earlier which is why I didn't test it but I did see it within the page HTML.
Specifically the stuff it inserts at the bottom of your page is what breaks it which I pointed out earlier.
Did you manually edit/parse your SMF files to get that AddThis mod installed in the first place?
AddThis isn't an SMF mod. It's a tool off the web. You can find more info on it, here (https://www.addthis.com/).
Ok so you made your choices and I assume opted inline for HTML?
Imo where you inserted the supplied code is part of the problem. Did you also attempt to change/adjust the supplied code?
Yes, I have the tools set to inline, and are specifically put in the index.template file, directly underneath the following code
// The main content should go here.
echo '
I'm not sure if the content somehow has your email in it because that seems to be all that is required by AddThis prior to providing the code insert.
If you want me to test it you can send the code to me via pm.
I can test it to see if I can get it to work without causing an issue. I have a live test forum already set up with all the same installed mods less your specific settings for them.
The instructions don't actually tell you to put their code at that point.
They say to put the first given file loading code directly before the </body> tag.
Then they give you inline code to put the payment icons (or social media, etc.) where you want on your page (within the body).
I'll give you some instruction:
file: ../Themes/Reseller/index.template.php
This should patch the mixed content...
find:
<head>
add this after the above code:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
The first code they give you to load their external javascript file is instructed to go just before this (in that file):
</body></html>
.. after that you put the second given inline code for the actual buttons where you want but they have to be in the body of the page.
Imo the loading of their js file should actually go in the head of the document but what I just stated previously is their initial instruction.
That code at the beginning did clear the mixed content messages, so thanks for that.
I already had the AddThis code above the </body> tag, and the other two lines of code were placed where I had mentioned before
// The main content should go here.
echo '
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_share_toolbox"></div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_tipjar_inline_8pfy"></div>
I tried turning the tipjar back on, but the horizontal bar remains.
Should I try moving the code to fix the horizontal scroll bar?
Alright I had the same issues on my test forum with the code placemants.
However I was able to place them without issue by making a few changes.
The first code that loads the 3rd party js file can go prior to </head> instead of </body>.
So for that theme place the first code prior to this:
</head>
<body>
Your other inline codes that you want at the top.. do not add them to the template file.
Create a "top" block & opt HTML style.
Disable the title & body styles for that block.
Change permissions so that everyone can view it & make sure it is enabled.
Also make sure it is visible everywhere by opting all those options including boards.
Add your inline HTML code to the block.
This should have it appear in the same place as you had it but without issues.
You have the option of changing the placement of the block to where you want it (top, sides, bottom, etc.).
Try that out which should work for you.
The only thing I see about issues on the page is robots.txt blocking things but it doesn't seem to cause any problems.
If all you provide your users is one theme option then that should be good.
If you want me to post an option for you that uses your portal for everything, does not involve any template edits and will work for all themes let me know.
I just tested it out using the portal, and it works great. Thanks a bunch.
I noticed the robots.txt issues as well, and I did a bit of research on it, and like you said, it seems like it's not really anything to worry.
If it's not too much trouble, I would love the option for users to be able to change themes and have all of this work. That would be fantastic.
No problem & glad it works for you.
Remove the edit to the template file but retain the src value of the tag they instructed you to insert.
Create an upper HTML type block with Tiny Portal.
Same thing applies for its settings as with the top block you created:
Disable the title & body styles for that block.
Change permissions so that everyone can view it & make sure it is enabled.
Also make sure it is visible everywhere by opting all those options including boards.
Add the following HTML code to the block:
<script type="text/javascript">
function addThisJavascript() {
var s = document.createElement("SCRIPT");
s.type = "text/javascript";
s.src = "<--CHANGE TO THE SPECIFIC SRC ADDRESS-->";
if (document.head) {
document.head.appendChild(s);
}
else {
document.getElementsByTagName("HEAD")[0].appendChild(s);
}
}
if (window.addEventListener) {
window.addEventListener("load", addThisJavascript, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", addThisJavascript);
}
else {
window.onload = addThisJavascript();
}
</script>
... just change the src value above which shows: <--CHANGE TO THE SPECIFIC SRC ADDRESS-->
to the src value of the first code that AddThis gave you.
This will dynamically create the javascript tag that loads the 3rd party js, adding it to the head of the document & it will load it for every page the block appears on which is for all themes.
BTW - make sure both blocks you created are set at position 0 which places them at the onset of block execution for their placements.
Now about the meta tag... The way we previously did that here you would need to add it to every template.
I attempted to dynamically create the meta tag the same way as above but it does not convert/upgrade those requests to TLS (https) when done that way.
At least not when the AddThis js content is being loaded dynamically.
However I did figure out how to do it using .htaccess (you are using Apache ... I checked).
Mod headers in your apache config must be enabled/available for this to work.
If you don't want to add the meta tag to all theme index.template files then do the following...
Either create a .htaccess file for your main forum directory or add to the bottom of your current .htaccess file if one already exists.
Add this code to the file:
<ifModule mod_headers.c>
Header set Content-Security-Policy "upgrade-insecure-requests;"
</IfModule>
That's it... those changes should allow you to use AddThis content without page or protocol violations less the robots.txt warnings for any template being used on your website.
It doesn't look like my theme change option is available anyway, even though I have the option set to 'allow members to change themes'.
Maybe I'm just missing where the user is supposed to go to change the theme. I logged in as a member, and looked under forum profile, but don't see anything about theme change...
If that's going to open another can of worms, I may just leave it as it is for now, and come back to this at a later time.
Thanks again.
Quote from: jbridges87 on July 04, 2020, 07:56:02 PM
It doesn't look like my theme change option is available anyway, even though I have the option set to 'allow members to change themes'.
Maybe I'm just missing where the user is supposed to go to change the theme. I logged in as a member, and looked under forum profile, but don't see anything about theme change...
If that's going to open another can of worms, I may just leave it as it is for now, and come back to this at a later time.
Thanks again.
Profile > Modify Profile > Look and Feel >> Current Theme:
Or turn on the TP Themes block if you have room for it. ;)
ha! It was right under my nose. I didn't see the dropdown menu.
Okay, going to give that last change a shot and see how it goes.
@Chen Zhen - I just tried it out and enabling the Core/Curve themes introduced some new issues, and so I think I'm just going to stick with the main reseller theme, and disable the option to turn the other themes on.
Thanks again for all your support.
Ya no probs, any time.
Oh well.. it works either way with what I tested.
At least anyone directed to this thread for the same information has an option if they frequently add or change themes.