-1

I built a personal website using Hugo and I like the way it turned out with one exception: all of the elements are just a bit too large. Zooming in the browser is able to smoothly reduce the scale of all components globally, and the website at 75% zoom looks much better to my eye.

Is it possible to globally reduce the scale of all components in Hugo or CSS so that the default scale for all components is smaller? I would much prefer a global scale rather than manually adding a scale parameter for every single component.

Website: http://www.markbuckler.com/

Code: https://github.com/mbuckler/personal-website

At 100% Zoom (current): 100% Zoom

At 75% Zoom (what I would like 100% to look like): 75% Zoom

Kantthpel
  • 149
  • 10

3 Answers3

1

Add to the 'html' tag 'font-size: 16px' and rewrite all your font-sizes, widths, heights etc to use rem(a ratio of the global font-size you just set as 16px).

Width of a div: width: 1.5rem; (16px * 1.5)

This way you can scale the entire website based on a single value.

Chris
  • 86
  • 5
0

You could try the scale() transform as a quick and easy fix, although longer term it would probably be better to find a less hacky solution and do the proper layout without using transforms.

Maybe also of interest: What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?

avigil
  • 2,218
  • 11
  • 18
0
define your container max-width:1024px or anything you want and margin:0 auto;

.main-container{
    max-width:1024px; /* you can change according to your website */
    margin:0 auto;
}
Abhi Sharma
  • 61
  • 1
  • 7