Content not sized to viewport: mobile problem

HTML & CSS
1

see: http://pintotours.net/Asia/India/holidaysDelhi.html

Google Analytics flags this page as “Content not sized to viewport”

When viewing the page in small mobile screens you can induce a lateral movement that backs up GA’s claim.

The page is based on the same css as 100 other pages which have no problems of the sort

see: http://pintotours.net/Asia/India/sightsDelhi.html

I had similar problems in pages that were sorted out by deleting white-space:nowrap; which controlled some text in the main central column, but this page has no similar code in the html-

I thought it might have to do with fixed widths in the table, but I’ve played around with it and all I can manage is to disrupt the whole page! Besides, that part of the page (Content) seems to display properly. What appears to be trying to exceed the width is the #header and nav bars. But those use exactly the same code as the 100 pages that I mentioned and that do not have the problem.

Help?

Thank you

2

Looks fine to me, and the Google mobile friendly test:-

Where are you seeing this? In Webmaster Tools? I have had false mobile errors flag up in GWT while the test says the page is “Awesome”.

3

Hi

I see it in my daughter’s mobile. The Google tester is useless: it says all’s fine and in another section it tells you that you have a problem and WILL NOT index the page for mobiles (though it does it foe larger devices)

Thre was a similar problem (sideways movement when you use your finger to move it sideways) in a third similar page and that was solved when it was found that a white-space:nowrap in the html was forcing some test beyond the limits of the viewport.

I have a feeling that it is the navbar tht’s doing it and that it needs a conditional inserted in the html, as the css controls 100 other oages and I cannot mess with it.

4

Sorry, I missed that and confused the issue by mentioning GA. Of course, in Webmasters’ Tools!

5

Normally I would dismiss it as a false error, since the tester says its OK and I have seen GWT show false errors many time before, but:-

There is no substitute for testing on an actual device, so it could be a genuine problem. Admittedly, I did not check it on a real phone, just a browser simulation, so I can’t identify a problem that I don’t see.

6

Is there something in the code that could be added as a first try to deal with the issue?

7

Looking at the two pages you linked above in FF responsive design view (I know its not a real phone but can be useful to find issues) the problem page breaks (get a horizontal scroller) at about 308px and the good page breaks at about 162px (more than enough).
The difference is I believe the table. Tables will only go so small. Try any other pages that have tables.
I think the problem is coming from the larger gap to the right of the table, but have yet to find the element creating that, its not the table its self, something else is offset.

8

I have the problem in ALL the pages that have tables, i.e the public holiday pages for each country; and NOt in any other pages that use the same stylesheet

So, I think you are right as the difference between these pages is the tables

For all it’s worth I attach 2 very bad photos that just about showhow the margin on one side moves to the other because of the movement of the screen

1024×768 46.4 KB

1024×768 44.8 KB

9

I think it is the way you have margins and padding set up for the containers. In the small view you just want everything nicely centred. A lot of things seem to be nudged across the screen with padding or margins to appear in the centre, and making some awkward offsets. Though I’m having a hard time making sense of it.

1 Like
10

I hope you will in the end, because I am at aloss here!

Thanks

11

Sorry, but I’m out of time this evening. But there will be other around who may help.

12

Hope so…

Thanks

13

For #box4 in the 400px query, set padding: 0; and margin: 0 auto;
Also in the 400px query, add rules for the table element, reducing the left and right margins, to maybe 5px. And lose the margin-left on the h2.
This will let the table squeeze a bit more, if you need it to go further, try reducing the padding for the table cells. Do all this in the 400px query.

14

Many thanks SamA74

My daughter is out and I don’t have a mobile to check for another couple of hours.

I’ve changed the existing conditional in the head of the html except for the table, which I am not sure what you mean by “add rules for the table element”

This is what I have so far:

  @media screen and (max-width:400px) {
    h2{

}
    #content #box4 {
max-width:300px;
padding:0;
margin:0 auto;

}
 
 /* make fourth cell in row 100px wide */
tr td:nth-child(4),
tr th:nth-child(4) { 
display:none;
}
  }
15

Add to what you have there:

table { margin: 5px; }

That will reduce the space around the table, allowing the page to get even smaller before horizontal scrollers appear.

16

@media screen and (max-width:400px) {
h2{

}
Content #box4 {
max-width:300px;
padding:0;
margin:0 auto;

}
table {
margin: 5px;
}

/* make fourth cell in row 100px wide */
tr td:nth-child(4),
tr th:nth-child(4) {
display:none;
}
}

Great! Give me an hour or so and I will test in the mobile.

Thanks again!

17

Hi

I’ve just got hold of another mobile and tested it in http://pintotours.net/TEST/123.html and

SUCCESS!!!

I will test again when my daughter gets home, but I believe you cracked it!

Thank you very much

PS - I have another thread titled IE8 margin problem, which nobody has taken up…

It is my last problem (for the time being…)

Thanks

1 Like
18

Hi SamA74

Confirm that the page is now working fine in mobiles

;Many thanks

RESOLVED

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.