Scaling down the UI

Themes
1

I would like my blog to be “zoomed out”. I think everything is very large and looks better at about 80% magnification. So I would like to modify my theme to scale everything down a bit. From my understanding of CSS this would be super annoying to do that would probably require I modify every element.

Is there an easier way to scale things down or would it be easier for me to ditch Casper and try something else

2

You could try and press the ctrl and - keys, both at once. If it doesn’t work, it’s maybe the time to ditch your computer - don’t buy another, they never behave.

3

I would have hoped it’s obvious that I know how to zoom chrome in and out. That’s not my concern. What I’m after is for everything to look smaller at 100% zoom. Y’know, how pretty much everyone will see it

4

If you are using the theme Casper by Ghost, you would have to edit the entire screen.css. You would have to edit pretty much any place where you can find a “max-width” in assets/css/screen.css.

And in global.css, you would have to adjust font-size of every element, so that it looks good with your newly shrunk site.

5 
body {
 transform: scale(.8);
}

:roll_eyes:

Prob a bad idea, but best would be if you went through the whole theme… or perhaps its written with em’s and rem’s, then you can just edit the main font-size to a smaller size…

6

Reviving an old post, because it might be the reason why the OP website looked too big.

I’ve found this scaling problem with Ghost and Windows scaling when using a 4K monitor.
At default 150% Windows desktop scaling, which is the recommended setting for a 4K monitor in Windows, Chrome browser auto scales the website contents to about 120%, too big. Whereas Firefox renders the website correctly.

So when viewing in Chrome I need to set the browser to 80% to make it match how I see the ghost site in Firefox…

I’ve found these scripts to correct this How to fix Windows Scaling issues above 100% for your Website - Silva Web Designs

1. Adjusting viewport width with JS

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));

2. Tweaking your stylesheet to make breakpoints reflect real device width

@media (min-width: 1200px), (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
  /* Add Styles Here */
}

3. Detecting the specific pixel ratio and then zooming everything out

@media (-webkit-device-pixel-ratio: 1.25) {
  * {
    zoom: 0.8;
  }
}

But I can’t get these scripts to work in Ghost, except the CSS ones can work except they break my other text code injections.

Any advice on best practice in getting these scripts working in Ghost? :)