Hi Everyone, I am working on a responsive design here: http://www.chipcave.com/pokeratitest/ When I look a the site on a laptop or desktop it looks perfect, however when on a mobile device a big white box appears over half the site. Any ideas as to why this is happening would be helpful.
Hey Guys, That is all fixed now thanks! But when i look at http://www.chipcave.com/pokeratitest/poker-store/ on a mobile device, it is zoomed out, even though the conatiner is only 300px? I am trying to inspect it but cannot find what element is spanning out past that.
The most likely culprit is you aren't setting up a viewport META or the CSS text-resize 'browser bitch-slap'. Try adding this inside HEAD: <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" /> Code (markup): ... and this to your CSS as a small screen (first and second gen) iPhone / windows Phone fix. @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } Code (markup): Basically both of those are to tell mobile browsers that we know what the **** we are doing, so display what we are telling you to display instead of manipulating it like it was NOT a mobile layout. Now, that said... You've got a LOT of issues on that page, not the least of which being non-semantic markup and markup bloat that's causing problems not just in delivery, but in the layout as well. Much of it is the HTML 5-tardery (that REALLY should be pitched in the trash)... From the nonsense of sending your CSS to "all", to the multiple stylesheets for NOTHING, to nonsense like spacer gif's, to all the HTML 5 bloat and non-semantic markup, to abusing ADDRESS on things that are not web contact addresses (which is why you pretty much never see people use that tag on websites), to some goofy scripting off warning that probably means your scripts are violating the unwritten rule of JavaScript (if you can't make the page work without JS first, you have no business adding scripting to it), to the endless pointless gee ain't it neat scripttardery for nothing, to clearing DIV like it's still 2001, to the incomplete/malformed forms, to strong+span being used to do numbered heading's job, to the gibberish use of numbered headings, to the outright stupid malfing jQuery BS, to the invalid ROBOTS meta, to the incomplete (and not gracefully degrading) favicon include, to the pointless META[keywords] that have zero relevance to the content of BODY, to the absolute URI's for nothing, to the stupid code-wasting 'onevent' attributes ... hardly a shock you've got anywhere from two to three times as much markup as necessary for a mere 2k of plaintext and two or three content images. It's just another laundry list of how NOT to write markup. Needs to be tossed and started over; preferably using tags that exist and are valid in your doctype; since you've got a perfectly good recommendation document (XHTML 1.0 Strict) and then have this mix of HTML 3.2 and HTML 5 crap inside it... since in the doctype you are using there is no such thing as HEADER, SECTION, NAV, FOOTER or any of the rest of that pointless redundant HTML 5 drek.