Help!
I am getting emails from google search console that says i have errors “content wider than screen”. Which is odd as when I have looked at it on my phone it looks fine (and not like their on screen mock up) I have had previous ones about clickable elements being too close also.
Do I need to worry about these? No users are reporting issues and if it doesn’t not affect SEO or usability in real life then I don’t care…
Any thoughts and advice appreciated.
Peter
That’s the real question isn’t it.
Search engines like google won’t say exactly what may or may not effect SERP rankings. Google and the others are placing more and more emphasis on the “mobile experience” and usability should be the most important thing in designing a website.
I would probably look at addressing these issues even if you aren’t concerned about SERP rankings just for usability alone. Just looking at a site on your phone might not identify every possible problem. There’s so many different screen sizes and types that a page might look good on some and not others.
There’s plenty of tools out there to help you out. You could probably start with Google own tool:
Thanks. I would fix it but i cannot really see what to fix! The page it refers to is very similar to all the other pages - and exactly the same width, so I just don’t know what to fix. The page link you sent just says the same error " content wider than screen"
Without a URL it’s going to be difficult to get help.
It could be the page doesn’t have the proper viewport tag or an image that’s to wide.
It could also be google test isn’t working right - wouldn’t be the first time a google tool gives false errors.
Thanks Doug. Sure. The URL is: https://www.livingfocusing.co.uk/
You have a lot of items on your webstie that are not loading because they are loading from non-ssl links and your website is now using ssl. When connecting via HTTPS, web browsers will not load content that is loaded from regular HTTP (non-ssl) links. Until this is fixed, you’re likely to have inconsistent and inaccurate results from tests like this.
Most of the errors are related to loading Google fonts. There is also at least one javascript file that is not loading. Change these to links from HTTP:// to HTTPS://
You can see where you have mixed-content using this website:
https://www.whynopadlock.com
Here’s a report on your website:
https://www.whynopadlock.com/results/84e3c6cf-db51-41f0-a465-383951086d2f
You also need to force https for www and non www versions of your site. At present if someone typed in http://livingfocusing.co.uk they would get a ‘site not secure’ warning. This is because ‘in reality’ all websites exist in 4 versions:
https://www.livingfocusing.co.uk
http://www.livingfocusing.co.uk
https://livingfocusing.co.uk
http://livingfocusing.co.uk
and the only one of yours that is secure is the first one.
Add this code to your .htaccess file to force all versions to redirect to the first one and thus appear as one secure site:
RewriteEngine On (this line should only appear once if there are other redirects in htccess)
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www. [NC]
RewriteCond %{HTTP_HOST} ^(?:www.)?(.+)$ [NC]
RewriteRule ^ https://www.%1%{REQUEST_URI} [L,NE,R=301]
This new article may also help: https://themeflood.com/knowledgebase/switching-to-https
Thanks so much Don, no wonder I am getting these results. Any ideas how I change these google font links to https? (i never even know my site used these!) Peter
Thanks also - that’s really helpful
It really depends. Did you add the code yourself to load those google fonts or is that all part of the theme your using?
If it’s part of the theme, make sure you have the most recent version of the theme from the developer. Most of them have been updated to use HTTPS to load any external files (including fonts) that are needed.
If you’ve added the code to load those Google fonts yourself, then you need to edit the code that loads them. It would likely be in the Settings --> Code --> Head area.
Hi - it came with the theme. And the developer is not great at getting back to me by previous standards! I’ll try though. Thanks for the advice.
I wouldn’t want to force https until all the active mixed content is fixed including the stuff from the theme developer.
I’m not at my Mac right now so I can’t look at the site, what theme are you using?
If the developer doesn’t get back to you you’ll need to either pick another theme (and developer) or modify the theme yourself.
If you’re interested in editing the code in the theme post back here and you can get some help. It is “coding” but shouldn’t be difficult to do.
Thanks. Good idea. Super reluctant to change themes. Am confident to change code but need to know where it is in theme package… I’ll see what the developer says…
Peter,
I don’t have Allegro Pro so I can’t give you exactly the “code” you would need to change. But I can tell you the way you would go and change the code.
The First step will be to duplicate the theme. Always work on a duplicate copy of themes. That way if the vendor updates or you mess up in editing, you can start over. You find the theme in the theme drawer, right-click and select Duplicate Theme
When you duplicate the theme, it will prompt you for a name for the copy.
You will need to have a Plain-text Editor installed on you Mac before the next step. Don’t use the TextEdit app that comes with MacOS; it is capable of plain text, but it defaults to something else. There’s plenty of free or Open source editors available.
Now select the copy and right-click and select Show in Finder.
You will get a finder window that looks something like this(It won’t be exact as the example is for the Alegro, not Pro)
In this finder listing, you will probably find a file called index.html. Right-Click the index.html file and selectOpen With, and from the list of apps choose the plain-text editor.
Now you will have an editor window open with the theme copy HTML file. If the mixed content came from the theme, it is more than likely in this file. You can do a find cmd+f with most text editors and search for http:. You will want to change those to https:. For google fonts and jQuery, there should be https versions of everything. Once done editing, then make sure you save and test.
Brilliant. Thanks so much for your time on this. That’s very clear.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
