Question

After finishing a website design for a client, I realized that everything was kind of small. After experimenting with the browser zoom, I found that zooming in 10% fixed a lot! The problem is, I can’t figure out how to resize EVERYTHING (div sizes, image sizes, text sizes, etc.) to 110%.

Any ideas are appreciated. I would prefer to do this all in CSS.

Edit –

Haha, OK guys, I guess I’ll just go in and actually spend some time changing the sizes. It isn’t what I wanted to do but I guess it is my only real option. Thanks guys 🙂

Answer 1

The correct way to do this is to redesign your website. If you have designed correctly, this should be very easy. Some advice:

• Page width: Increase the width of your outermost container, child element widths should expand to fill the space unless you have hardcoded absolute widths set. In those cases, adjust the px to accommodate.

• Font size: If you have used em or % values, just increase the font-size of body (the other elements will inherit this base font size). If you have used px for font sizes, you’ll have to increase them.

I think you know deep down that “zooming” the page via javascript or the IE zoom property isn’t the right approach and you are avoiding the redesign. Even something like body{ transform:scale(1.1); } is going to make your images look bad when they scale/stretch, and since it’s CSS3 the support will be lacking, and after testing this idea it appears to be able to scale content out of the viewport/visible area.

The right way to do it if you want this to be permanent change is to rewrite your CSS.