• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Google WMT complains about XenforoMobile Usability

Mr Lucky

Well-known member
#1
In Google WMT, I have many pages flagged as > Content not sized to viewport. However I can't work out why this is as everything seems fine on my phone, no horizontal scrolling.

Can anyone help please?
 

RDR

Well-known member
#4
It's your 3 'pete-footer' divs from what I can tell that are probably your issue... they cause a scroll-bar for me on my desktop when resizing the browser window down.
 

Mr Lucky

Well-known member
#5
It's your 3 'pete-footer' divs from what I can tell that are probably your issue... they cause a scroll-bar for me on my desktop when resizing the browser window down.
No, I think you'll find that is the Google responsive ad not the divs which should collapse nicely. Google ads don't resize dynamically so if you reduce the browser width you get scroll bars until you refresh. So this is a bit of a red herring, try refreshing after reducing width, you should see the scroll bras go (they do for me anyway)


From what I can tell it's only the pages that have images resized down by the default xenforo resizing.

If it was the footer, I would get the WMT issue on all pages, not just the ones with images.
 
Last edited:

Mr Lucky

Well-known member
#9
I test on Firefox Tools Web Developer Responsive view, and it when reducing the width it finally shows horizontal scrollbars at less than 330px. I don't think there's any mobile browsers that small these days.
 

RDR

Well-known member
#12
I'm just telling you where the issue lies.

If you want to 'fix' the WMT issue, you can by adjusting the class property. I can tell you that no matter my viewport size, that class has a 370px width set.
 

Mr Lucky

Well-known member
#13
I'm just telling you where the issue lies.

If you want to 'fix' the WMT issue, you can by adjusting the class property. I can tell you that no matter my viewport size, that class has a 370px width set.
OK I can see why it is 370px above max-device-width:400px, but I must be doing something wrong with the responsive settings.

Shouldn't the width reduce when the CSS is set like this:

Code:
.pete-footer
{border-radius:7px;background-color:@primaryMedium;color:#ffffff;width:370px;min-height:150px;padding:10px;float:left;margin:0px 5px 10px 5px}


@media only screen and (max-device-width:400px)
{.pete-footer
{width:310px;}
}

@media only screen and (max-device-width:340px)
{.pete-footer
{width:300px;
padding:7px;
margin:0px 0px 2px 0px}
}