I'm currently working on my photography webpage. When resizing the browser down, all the html disappears from 960px downwards and shows nothing but a grey background.
Can anyone explain why this is happening?
Copied the code the best I could from adobe muse.
CSS.
#outer_wrapper {
width: auto;
height: 560px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
margin: 0 auto;}
#outer_wrapper #inner_wrapper {
width:15000px;}
#outer_wrapper #inner_wrapper.box {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border:0.0px white solid;}
#outer_wrapper #inner_wrapper.boxV {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border:0.0px white solid;}
My guess is that when you make the innerwrapper have a width of 15000px, and then proceed to turn off white-space wrapping that the content is just being pushed way off to one side and is unable to be seen. Try getting rid of the overflow-x: hidden; and overflow-y: hidden; and see what happens if you scroll all the way through the containers to see the content. Also, using overflow: hidden prevents the user from scrolling at all, which probably isn't the best solution.