After building a web site for a client, he had desired later to have this site in reduced site width – for desktop and laptop screens only. https://lead.bio
The initial theme was and does remain the nice Geometric theme by Elixir Graphics in 1060 pixels width. I can, of course, reduce the width by 100 or more pixels, but this might reposition some text and graphic boxes. The most important – I don’t wont to ruin the composition and to be forced to rebuild it again.
My question is:
Is there any solution to reduce the width and the entire content (text, images, and white spaces) to 80%?
It might be a line of added code or existing appropriate stack, or to instruct/force the browser to open the site in 80% of its initial size.
You might need to add in some !important lines here and there to get it to work.
EDIT: The max width 80% code will of course apply to all screen sizes, so if you want the mobile version to be 100% wrap the code above in a media query. Or, change the max-width from 80% to 800px, or whatever you want the max width to be.
Thank you, Doug, and yes, I want to zoom out and try not to destroy the entire composition. That means to reduce even the font sizes and white spaces to 80%. If they don’t reduce proportionally, I’ll obtain a squeezed text content in a downward direction, displaced images, etc. So my task seems clear – to reduce the entire composition. I’m trying to find a solution for this particular case in one simple step (if possible).
I’ll try the suggestion of TemplateRepo, or will just change the original site width (with a huge amount of additional fine tunning work, I don’t want) and will share the result.