I have scoured the net to try and find a solution to my horizontal divs issue. What I’m going for is a responsive horizontal scrolling website for desktop (using white-space: nowrap) that will also scroll vertical on mobile. I have the mobile part just fine but for some reason I can’t get the div’s to stretch.
However I was able to get the gallery pages to stretch properly (maybe not IE yet, haven’t tested), e.g.: http://sp.leighmcd.com/calgary-wedding-photographer/annie-jeff/
But when I’m on a page with content inside divs I can’t get them to stretch the same: http://sp.leighmcd.com/calgary-wedding-photographer/
I have stripped the whole site down to try and resolve this, but let me know if anyone has any recommendations!
I have two style sheets to make the site responsive. These are the mobile styles:
.main {
width: 100%;
min-width: 320px;
}
.overview {
width: 100%;
}
.contentblock {
width: 100%;
}
.intro {
width: 100%;
}
These are the styles for the desktop:
.main {
white-space: nowrap;
}
.overview {
}
.contentblock {
white-space: normal;
display: inline-block;
text-align: left;
float: left;
margin: 0;
}
.intro {
margin: 0 0 0 0;
}
