I have two web pages linked below. Both use a viewport meta tag, but one is set to “width=device-width” and the other is set to “width=970”. I am curious why the dark blue background color of the footer DIV does not span the entire width of the viewport when viewed on a mobile device (I am testing on an iPhone4 and 5). Can someone explain the reason why it is not working and, ultimately, provide me with a solution to solve this issue? Thank you in advance!
Your webpages are fixed width. Even with the meta viewport tag, that does no good if you are making your webpages only able to scale down to 900px (around there). On mobile, there is just too much content to fit on that small screen, so thus it overflows. Your footer only has width:100% and then it has overflow:hidden and removes any possibility of more blue.
You need to actually make your page responsive and make it fluid. Pixel widths on your structures are about 5-6 years old.
Ryan, I have now removed the footer’s width: 100% and the overflow: hidden. Would that help at all? It seems that there could be a fix without rebuilding it as a responsive site. Or am I totally wrong?
I do not advocate this, since it’s obviously not a great solution, but you can remove the meta tag which will basically make mobile devices shrink the page down (you’ll get the desktop version but just a really tiny one that people will have to zoom in to use).
Making hte page responsive wouldn’t be that much work. You’d just remove the widths and maybe make them percentages…media query for mobile size…This page isn’t that complex.
If this is for a client, I have a hard time imagining them not complaining about the weird mobile view that they will now get. Just throwing that out there Todd.
If you have viewport = 970 then you must ensure that all the elements in your page can be no smaller than 970px which would mean adding a min-width of 970px to your footer. Then the page will render at 970px on the mobile device but of course you will need to scroll sideways to see it all.
If you remove the viewport meta tag completely then the device will assume the page is 960px wide and then scale it to fit on the 320px viewport resulting in a small site which the user will need to zoom to see.
As Ryan said it shouldn’t take too much to make it responsive and would be the best choice.