CSS Width stranege beahviour on small screens

Question

I have a aparently an easy problem with the width of my container when accesing in mobile devices or small screens

I spent 3 hours wonder why but...I can´t find the way

this is the url >> http://goo.gl/ZlLn3

You can see how the header, the content and the footer are beign limited when accesed by ipad/iphone or you resize the browser in desktop...i don´t need to go responsive, I only want the design shows full in every device !

Answer 1

Try to use CSS media query

Target iPhone and iPad with CSS3 Media Queries

Media Queries for Standard Devices

Answer 2

It is caused by your combination of width: 100% and overflow: hidden .

The elements are not wider then the browser viewport (100%), and from they they overflow and you hide them ;)