RW site – 'Entire content reducing' question

Hi there,

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.

Thank you!

Try…

#site_wrapper {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

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.

1 Like

If I understand what you are looking for you, want to basically ”zoom-out”? Not move a thing.

Unfortunately, the way web browsers work if you reduce the site width then the text will wrap around to lines and space down.

I’d change the width settings in master styles and test it out.

1 Like

Thank you TemplateRepo, I’ll try it tomorrow and will share the result.
Have a nice day :slight_smile:

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.

Thank you once again,
Vess

Okay,
If the user opens a window of less than the maximum size you have set than right now the text is going to get forced down the page and move other elements further down the page.

Images look to be all responsive so they will get smaller.

That’s what responsive websites are all about.

I just did for you and you can see it’s not doing what you want. It’s pushing the content down the page (like a responsive site is suppose to work.

1 Like

Thank you once again TemplateRepo :slight_smile:

The code you sent works just fine. I placed it as 900 px width with the addition of ‘! important’ as you advised.
It works perfectly on the test site.

Thank you Doug,

You’re right, there was an issue with the visibility of the header ‘Overview’ and the wasted space. It was my fault – just fixed on the test site thanks to your remark.

Thank you for your time and competence, helping me!
Have a nice day,
Vess