I need to take this website:
…and make it fit nicely on iPad and other tablet devices. The site is built to a fixed width of 1048 pixels, and as such doesn't look right on those devices.
Many of the elements throughout are aligned with down-to-the-pixel precision, which makes this task a bit challenging. I tried messing around with width/height percentages on specific elements in my media queries… that gets me closer to the goal, but some things were still way off and I don't know that I can make everything align perfectly using that method.
I'm not asking for specific code here necessarily, but a strategy. Should I setup media queries that rework my CSS to some other fixed size? If so, is there a way that it can fill the page (especially the width) nicely no matter what the device's exact resolution? Or must I use percentages rather than a "less than 1048" fixed width approach, since I don't know exactly what the user's device resolution is? How does my "viewport" setting play into this (if at all)?
One example of something I tried: my header and footer I gave a 92% width, centered. That gave me a nice margin on either side, and by resizing the fonts, the header and footer looked good. But the three columns of content blocks on the home page… I could not get those to size exactly right using percentages. If you click one of those content blocks, you get another set of "pop-up" content that also needs to fit. Those two areas are where I got stuck.
Anyway, I just need to get from where I am now to a nice looking website on a tablet. The client is happy with the design, it just needs to fit. I think someone's better experience with this stuff is going to help me get to the goal a lot faster, and I'm hoping I can do this in a relatively painless way.
I would appreciate any advice. Thank you!