CODEWITHSUNDEEP
javascripthtmlcssweb
Randomly Named User
Randomly Named User

Reputation: 1949

Scale down a webpage to 90%

When you press Ctrl+- on any browser, the page scales down to 90% of it's original size. I need to replicate that, and open my webpage at 90% of it's original by default, instead of 100% because it looks nicer at 90%.

I tried the most common approach as mentioned here, here, and here, all of which basically tell you to add this block of code in your css.

html
{
    zoom: 0.9; /* Old IE only */
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

The problem with this is that it creates a gap on the left and the right sides, as well as a huge gap on the top, which aren't present when you manually reduce the size by doing a ctrl+-.

This is what happens when I use the above mentioned code - notice the gaps on the left, right, top. This is what happens when I use the above mentioned code

While this is what I want - this is what happens when you do a ctrl+ - manually in your browser. While this is what I want - this is what happens when you do a ctrl -.

How do I go about this?

EDIT: As Jonathon said in the comments, if my page looks nicer at 90%, I should have designed it to be that way instead of having to scale down. The problem was that I'm using this default template, and I just prefer it at 90% over the full 100%.

Upvotes: 6

Views: 3607

Answers (2)

Marek Stašík
Marek Stašík

Reputation: 1

Maybe you can compensate this gaps with margin-top:-50px; for specific elements.

Upvotes: 0

Matt
Matt

Reputation: 1167

You need to use/convert to relative units in your CSS. Either % or em or rem.

Then at the body level you can set an absolute size that results in the relative measures recalculating to what you want.

If you use em or ex exclusively: You declare font-size: 90% for body and you'll be able to adjust on the fly.

It all comes down to the units you choose and making them relative will allow you the kind of freedom you are looking for now.

Upvotes: 1

Related Questions