Whitespace on Mobile Design

On our website, I noticed that there is a whitespace to the right of the design on mobile layouts. Normally I am able to use a Ghost CSS tool to find out which element is causing the space, but it seems this time is a tad different.

From the info I have gathered, it appears to be the header elements that are causing the difference. Any help would be greatly appreciated. As well please try to keep it to positive constructive criticism.

Best wishes all.

 

Here it looks like the header and footer broken -- it's refusing to resize with the rest of the content; NOT that your layout is the slightest bit small display friendly in the first place since it's really NOT re-arranging itself to be responsive in the least. You need to have any media queries strip a LOT more formatting off the design given the broken menu that's too wide, broken fixed footer that's too wide, right padding for nothing on the content making the flow text to the left reduce to the painfully useless "one word per line", etc, etc...

Peeking under the hood it still reeks of non-semantic markup and has little if any proper separation of presentation from content, and that's a hefty chunk of what's biting you in the backside... and that's before we talk the endless pointless DIV for nothing, endless pointless classes for nothing, ID's for nothing, attributes like TARGET that have no business on any website written after 1997 (well, unless you are using "HTML 4 Frameset" as your doctype), incorrect use of numbered headings (I'm pretty sure that "About the Cave", "in our store" and "customer service" are NOT the start of subsections of "Tri-Fold Poker Table Top with Cup Holders"), absolute URI's for nothing, endless pointless scripttardery, incorrect use of ADDRESS (admittedly its by the book "use" means there's no reason to EVER use <address> on a modern website), and in general just plain broken bloated sitebuilding methodologies that reek of just slapping together off the shelf parts and blindly hoping it works.

... and of course it's missing all the stepping stones one should have BEFORE trying to make it mobile friendly like a proper semi-fluid elastic layout; IF you had semantic markup, separation of presentation from content, progressive enhancement, and a semi-fluid elastic layout with dynamic fonts -- things typically accomplished by worrying about what it looks like AFTER dealing with the content and what things ARE -- making it responsive for mobile devices would be a no-brainer. You don't have any of that, so say hello to an uphill battle and why I believe I told you months ago to pitch that entire train wreck in the trash and to start over clean. You don't and you'll end up throwing buggy unreliable silver bullet hacks at it and blindly hoping it doesn't break again -- which of course it will.

When you have HTML and CSS written by people who apparantly didn't know enough about HTML and CSS to be building a website, this:

http://www.cutcodedown.com/for_others/Borduhh2/broken1.jpg

Being SO useful when scrolled

http://www.cutcodedown.com/for_others/Borduhh2/broken2.jpg

...is what happens. It's what I SAID would happen when you got upset when I told you all this last time... and it's what's going to continue to happen until you bother using HTML and CSS for what they are FOR.

...and that's without even TALKING about the illegible colour contrasts, silly content redundancies, invalid ROBOTS meta (there is NO SUCH THING as "index" or "follow"), pointless empty META, PNG for favicons, type attribute proven to screw up favicons, goofy webfont embed you don't even seem to be using, etc, etc...

Again, pitch it and start over, there is nothing worth even trying to salvage from that mess. That might sound harsh, but that's what truth often is.

"positive criticism" is akin to military intelligence and dry water, do you want to fix it or not?