XF 1.5 Google WMT complains about XenforoMobile Usability

[Mr Lucky]

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?

 

[Chris D]

Which pages?

 

[Mr Lucky]

e.g.

http://cafesaxophone.com/threads/how-do-i-find-them-toptone-worth-a-punt.17246/

http://cafesaxophone.com/threads/arbiter-tenor-sax.7532/

http://cafesaxophone.com/resources/saxophone-mutes-101.88/

 

[RDR]

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]

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.

 

[RDR]

Nope.

 

[Mr Lucky]

Nope.

View attachment 125004

What width is that? Looks like far smaller than any mobile.

 

[Daniel Hood]

I can't get it to do that on my Mac with Chrome at any size.

 

[Mr Lucky]

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]

.pete-footer class has a width of 370px set

Change that and you should be good.

 

[Mr Lucky]

.pete-footer class has a width of 370px set

Change that and you should be good.

Yes, but at max-device-width 400px, it is 310

and max-device-width 340px it is 300.

 

[RDR]

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]

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:

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