Changing page size

[Rafalw]

Hi
I would like to reduce the size of my page by 10%. I use the command:
body {
transform: scale(0.9);
transform-origin: center;
}
But then there is empty space at the top and bottom of the page.
So what command should I use?

 

[Antero360]

Hi
I would like to reduce the size of my page by 10%. I use the command:
body {
transform: scale(0.9);
transform-origin: center;
}
But then there is empty space at the top and bottom of the page.
So what command should I use?

Hi there,
You could just try

body { 
    padding: 0 5%;
}

which is the same as

body { 
    padding: 0 5% 0 5%;
}

0 padding on top and bottom, and 5% on left and right.

 

[Johna]

Hi there,
You could just try

body {
    padding: 0 5%;
}

which is the same as

body {
    padding: 0 5% 0 5%;
}

0 padding on top and bottom, and 5% on left and right.

That just reduces the amount of available space, but doesn't actually scale down the page.


We can use a negative margin at the top and bottom of the body which should be 5% of the body's height, and for the side, 5% of the body's width.
Because CSS can't get the width/height of the body, a little bit of JavaScript is needed:

function scalePage(scale) {
  const body = document.querySelector("body");

  body.style.transform = `scale(${scale})`;               // scale body

  const vMargin = body.clientHeight * ((1 - scale) / 2);  // calculate the margins we need to remove from the top and bottom
  const hMargin = body.clientWidth * ((1 - scale) / 2);   // calculate horizontal margins

  body.style.margin = `-${vMargin}px -${hMargin}px`;      // apply negative margins

}
scalePage(0.9);

To make sure the margin changes when the page size changes, we can add the window resize event listener:

window.addEventListener("resize", () => {
  scalePage(0.9);
});