I was all excited to launch this new site but its not scaling scaling correctly. I have used this theme many times, but this time I had to go beyond the normal 960px width with the psd I got back from designer. But now its totally jacked up when I look at it on phone or tablet. Do I have to redo everything for a 960 width?
The layout also has problems on desktop. It only works on really wide viewports, because the main content is not aligned with the header section. You need to wrap the content in a div that is centered, just as you do with the inner header content. That’s where I’d start.
The inside header content is wrapped with a centered “inner” class, and the page has the same class. So the larger background images shouldnt be the problem then right?
think i found a better way to slice it…i’ll try that first 
@Ralph.m
I got it closer changing some of the backgrounds. It stays lined up, but now Im left with some white space on the right side on smaller viewports. What causes that?
I am also wondering if I didnt take the right approach with the large image background because then all the other text divs jump all over on smaller devices. I originally started slicing each content section, which I think would help with the text positioning. But I did away with that thought because of all the extra http requests.
You’ve improved it now, though even on the desktop it has that problem of whitespace on the right. that’s usually caused by some element sticking out to the right that hasn’t been placed properly. In this case, if you go through all the elements, you find this is the case with the .gform_body div (and possibly others, too).
Thanks Ralph! That form was the biggest offender. I rescaled some of the other images too… looks decent now. What you think?
Looks much better, although you still have tha problem that when the browser window gets narrower, the body background image at the top keeps moving, and as you scroll right the background that was hidden doesn’t reappear. Usually thats easy to fix, but has me stumped. Something is collapsing, even though you have min-widths set.