Webpage displays incorrectly on different resolutions due to incorrect css

Question

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems

HTML: http://pastebin.com/raw.php?i=bbFsMcwT

CSS: http://pastebin.com/raw.php?i=SGMwt3cs

JSFiddle: http://jsfiddle.net/D8SJD/

• Issue 1 - Left/Right Scroll Image Buttons
  • Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"

---

• Issue 2 - Dynamic Resolution(s)
  • The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
  • On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
  • On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
  • On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
  • On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns) .
• The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
• Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
• Please see images at bottom of this post

For the mobile devices I tried things like below just for testing but none of them worked...

@media (max-width: 640px) {
    #header > a img {
        display: none;
    }
}

EDIT 14/11/2013 @ 01:58GMT

On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:

On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.

On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.

Answer 1

Type

@media screen and (max-width:640px) {
  /* Your specific styles go here */
}

and dont forget to add

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Hope that helps :-)