This has to be simple, but I’m just not getting it.
Here’s the deal: I’m building my portfolio site and wanted an infinite width kind of thing, where the backgrounds of the various element extended as wide as the screen gets.
I found a good answer on this site, of course, and it involves simply setting a huge negative horizontal margin value and the exact same huge but positive padding value on the elements, and then setting overflow-x: invisible
Kinda like this:
body {
overflow-x: hidden;
}
header{
background: #ffa200 url(../img/header-bg.png) repeat-x;
margin: 0 -3000px;
padding: 0 3000px;
height: 166px;
}
Example here: http://thefstopdesign.com
The problem is, I want the scroll bar to come back of the window is sized below the layout width of 960px, so things don’t just disappear off the screen.
The extent of my media query attempt went like this, and does not seem to work:
@media screen and (max-width: 960px) {
body {
overflow-x: scroll;
}
}
