mobile Content not sized to viewport Horizontal width/scrolling problem

[Bitedge]

Hi Guys,

A couple of pages/posts do not have horizontal scroll on mobile even though the content goes off the screen.

http://www.bitedge.co/sports-betting-tools-and-resources/overround-and-probability-calculator/

http://www.bitedge.co/blog/cloudbet-vs-nitrogen-sports-bitcoin-sportsbook-comparison/

Google says the first one is “Google calls this Content not sized to viewport.”we already have some custom css to deal with this kind of thing and it is working on pages like

http://www.bitedge.co/odds-comparison/english-premier-league/

How can we fix this? Thanks

[Bitedge]

It’s been 3 days now since I asked, please help

[Rui Guerreiro – SUPPORT]

Hi,

Apologize for the delay, the weekend betten didn’t helped.
Don’t know how to sort it. Will have to forward this one to Ed

Thanks
-Rui

[Swift Ideas – Ed]

This is due to your custom css:

html {
    min-width: 550px;
}

– Ed

[Bitedge]

That has made things worse

http://www.bitedge.co/sports-betting-tools-and-resources/overround-and-probability-calculator/

http://www.bitedge.co/blog/cloudbet-vs-nitrogen-sports-bitcoin-sportsbook-comparison/

still had the problem and the first 2 other page I checked on mobile

http://www.bitedge.co/blog

http://www.bitedge.co/bitcoin-sportsbook-reviews/vegascasino-sportsbook-review/

had the problem where before they did not and removing it fixed the problem on those 2 pages.

Also I noticed the homepage now has a problem on mobile, it probably should be displayed as one column, instead its 3 with 2 on screen and the third inaccessible of screen.

So there are many problems with the site on mobile. This is a now very importaint. Ed I will give you log in details please fix.

[Bitedge]

This reply has been marked as private.

[Swift Ideas – Ed]

The issue is those tables aren’t responsive – you’ll need to add scroll bars or some other workaround to making them visible on mobile – setting the html tag to have a min-width of 550px is madness as mobile browsers are lower than 470px wide, which will obviously cause an issue. The theme as it is is responsive 100% – it’s your content which isn’t responsive here, and your customisation has only taken away from that.

Add this to make the homepage 1 column on mobile:

@media only screen and (max-width: 767px) {
.one_half, .one_third, .two_third, .three_fourth, .one_fourth {
    width: 100%!important;
}
}

– Ed

[Bitedge]

Sorry I misunderstood Eds first post, I thought you were telling me to add the custom css

html {
min-width: 550px;
}

So I did but I guess you were saying that was the cause of the problem. The reason I got confused is because that custom css was never present on the site, at least its not in the custom css field, the child theme css sheet or the theme css sheet. Now I have added it and taken it away all the extra problems I found since the first post are gone and Ed is spot on the solution to
http://www.bitedge.co/blog/cloudbet-vs-nitrogen-sports-bitcoin-sportsbook-comparison/ was to add a scrool to the table.

So to reset this thread there is only one problem page

http://www.bitedge.co/sports-betting-tools-and-resources/overround-and-probability-calculator/

Its not a table so I cant add a scroll to the table can we add a horizontal scroll to the page? I am sure it used to work, perhaps until the last theme update I did.

And if you can use the login I gave we also have these outstanding

Same iframe displays differently in page and post

possible to change text size in top nav bar and breadcrumb thread?

Thanks

[Swift Ideas – Ed]

It is a table? https://www.dropbox.com/s/5z5bvchsqybej7u/Screenshot%202015-07-28%2015.43.26.png?dl=0

Will check those threads.

– Ed

[Bitedge]

Okay, I meant the other tables on the site are actually made by the tablepress plugin where I can just check the button “ad horizontal scroll” button.

This is a plugin, the plugin code is where it says

<style type=”text/css”>
html {
min-width: 550px;

but even if this element is not responsive shouldn’t a horizontal scroll appear on any page where the content must be wider than the screen (it used to)? I checked my custom css and found

@media (max-width: 479px) {
body.page-id-5540 {
overflow: visible;
}

I don’t know what page-id-5540 is, how can I find out? Applying this to the page in question does give us the horizontal scroll on mobile but do we like this solution? do you think it solves google complaint of “Content not sized to viewport”? Should it be applied site wide?

[Swift Ideas – Ed]

That overflow: visible code should be applied wherever the previous code is used – otherwise you will have an overflow of content that can’t be viewed.

It likely won’t solve the google complaint, as the whole page isn’t visible without horizontal scrolling. The only way to solve that would be to replace that table plugin with one that has responsive tables.

– Ed