Advertisement:

Author Topic: Viewport Issue  (Read 2970 times)

Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Viewport Issue
« on: June 29, 2020, 10:47:45 AM »
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;

Code: [Select]
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?
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline Deaks

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,485
  • Gender: Male
    • SMFReview on Facebook
    • pouvik on GitHub
    • @@smfreview on Twitter
    • SMFReview
Re: Viewport Issue
« Reply #1 on: June 29, 2020, 11:13:12 AM »
what theme are you using?

Offline drewactual

  • Sr. Member
  • ****
  • Posts: 859
    • College Football Fan Site CFB51
Re: Viewport Issue
« Reply #2 on: June 29, 2020, 11:27:04 AM »
out of curiosity, try the over-simplified:
Code: [Select]
<meta name="viewport" content="width=device-width"/>
and report back. 

Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Re: Viewport Issue
« Reply #3 on: June 29, 2020, 12:00:38 PM »
@Deaks - Reseller theme.

@drewactual - No change.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline drewactual

  • Sr. Member
  • ****
  • Posts: 859
    • College Football Fan Site CFB51
Re: Viewport Issue
« Reply #4 on: June 29, 2020, 12:08:15 PM »
add to your primary css:
Code: [Select]
@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...

Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Re: Viewport Issue
« Reply #5 on: June 29, 2020, 03:27:06 PM »
No luck with either body or wrapper.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline Deaks

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,485
  • Gender: Male
    • SMFReview on Facebook
    • pouvik on GitHub
    • @@smfreview on Twitter
    • SMFReview
Re: Viewport Issue
« Reply #6 on: June 29, 2020, 03:56:38 PM »
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

Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Re: Viewport Issue
« Reply #7 on: June 29, 2020, 05:16:54 PM »
I tried that. Sent a message two days ago, and haven't received a response.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 72,656
    • StoryBB/StoryBB on GitHub
Re: Viewport Issue
« Reply #8 on: June 29, 2020, 05:47:37 PM »
You sent a message demanding someone help you and only you, or you posted in the theme’s topic where everyone can benefit?
Please don’t PM me for paid work, I’m not for hire, and even if I was, I doubt you could afford me.
USD$150 per hour. Typical waiting list 3 months.

Offline Chen Zhen

  • Sophist Member
  • *****
  • Posts: 1,272
  • Gender: Male
  • If you're going through hell, keep going!
    • Underdog-01 on GitHub
    • WebDev.ca
Re: Viewport Issue
« Reply #9 on: June 29, 2020, 06:36:50 PM »

Your site is Crown Sports?

It seems to be responsive when I test it using MS Edge dev tools (all available devices).

My SMF Mods & Plug-Ins

WebDev
Simple Portal Support

Request politely & demand nothing.

Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Re: Viewport Issue
« Reply #10 on: June 29, 2020, 06:58:30 PM »
@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.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline Deaks

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,485
  • Gender: Male
    • SMFReview on Facebook
    • pouvik on GitHub
    • @@smfreview on Twitter
    • SMFReview
Re: Viewport Issue
« Reply #11 on: June 29, 2020, 07:42:01 PM »
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.

Offline lurkalot

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,645
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Viewport Issue
« Reply #12 on: June 30, 2020, 02:32:16 AM »
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.



Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Re: Viewport Issue
« Reply #14 on: June 30, 2020, 10:40:56 AM »
@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.

Code: [Select]
User-agent: *
Disallow: /test_site/
Disallow: https://crown-sports.com/index.php?action=stats

Sitemap: https://crown-sports.com/sitemap.xml
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline lurkalot

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,645
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Viewport Issue
« Reply #15 on: June 30, 2020, 01:17:28 PM »

@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. 

Offline Chen Zhen

  • Sophist Member
  • *****
  • Posts: 1,272
  • Gender: Male
  • If you're going through hell, keep going!
    • Underdog-01 on GitHub
    • WebDev.ca
Re: Viewport Issue
« Reply #16 on: June 30, 2020, 01:22:53 PM »
Code: [Select]
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.

My SMF Mods & Plug-Ins

WebDev
Simple Portal Support

Request politely & demand nothing.

Offline Chen Zhen

  • Sophist Member
  • *****
  • Posts: 1,272
  • Gender: Male
  • If you're going through hell, keep going!
    • Underdog-01 on GitHub
    • WebDev.ca
Re: Viewport Issue
« Reply #17 on: June 30, 2020, 01:41:25 PM »
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..

My SMF Mods & Plug-Ins

WebDev
Simple Portal Support

Request politely & demand nothing.

Offline jbridges87

  • Jr. Member
  • **
  • Posts: 181
  • Gender: Male
Re: Viewport Issue
« Reply #18 on: June 30, 2020, 03:39:37 PM »
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.
Come by and check out my sports forum, here.
Running SMF v2.0.17

Offline Chen Zhen

  • Sophist Member
  • *****
  • Posts: 1,272
  • Gender: Male
  • If you're going through hell, keep going!
    • Underdog-01 on GitHub
    • WebDev.ca
Re: Viewport Issue
« Reply #19 on: June 30, 2020, 07:13:29 PM »

Uninstall the Optimus modification & test your mobile layout afterward.

My SMF Mods & Plug-Ins

WebDev
Simple Portal Support

Request politely & demand nothing.