Centering theme

Hello,

I have tried to reduce the zoom of the theme to 80% with the following code in global CSS:

@include screen-lg {
    body {
        zoom: 0.8; 
        -moz-transform: scale(0.8); 
        -moz-transform-origin: 0 0;
    }
}

and it works fine on Microsoft edge & Google Chrome but with Mozilla Firefox the theme in not centered

How can I fix it?

I have tried to force the body to the center by changing the previous code into this, but nothing happened

@include screen-lg {
    body {
        zoom: 0.8; 
        -moz-transform: scale(0.8); 
        -moz-transform-origin: 0 0;
        body-align: center !important
    }
}

(my CSS knowledge is equal to zero so be patient)

Thanks Alexander Ebert for the reply, the code was provided by the creator (I would have never got to even that point by myself)

Unfortunately by following your instructions the theme does not display correctly

UPDATE:

I tried to set the following

- Minimum Layout Width 80%

- Maximum Layout Width 80%

the theme displays correctly (Body 20% reduced and correctly displaying on mozilla) but all writes, logos, menus are the same size (100%)

I am trying to display the site at 80% zoom as I think looks much neater (including all text, logo and menus)

Quote from Alexander Ebert

Why would you even zoom the entire site, this introduces a lot of scaling issues including fuzzy text and other sorts of artifacts as a side effect of anti aliasing attempts? Are you just trying to reduce the width?

It was not my idea to be honest I asked and this code was provided..

Quote from Alexander Ebert

I wouldn't recommend to zoom the site, the results are overall pretty poor and the aforementioned anti aliasing decreases the legibility of the site. Just looking at the menu buttons, that text is anything but sharp. This also means that image quality decreases and longer messages become harder to read.

I can see the motivation behind your approach, but I don't think that it outweights the drawbacks from a user's perspective.

Understoot I am now trying your approach but I would need further help in identifying the px values that would need to be decreased 20% (I tried to do it manually but other than "Global settings" I would need to touch the "advanced settings" values) and I just wouldn't know which ones needs doing.

I don't want to post the code here as it would mean giving away the theme I guess and wouldn't be correct

Quote from Alexander Ebert

The style author uses a different approach, but this additional (!) rule should do the job.

CSS

@include screen-lg {
    .pageContainer {
        min-width: auto;
        max-width: none;
        width: 80%;
    }
}

Just tried the code, Unfortunately as it only reduces the width all the rest remains the same size and does not display correctly.

I think the only way to do this properly is to reduce by 20% al px sizes in Global and advanced settings, which will be a pain especially because I'm worried I will mess all the theme up

I did but in this case, the menu bar would not reduce as well as the control panel/notification/moderation bar

the effect I am looking for is the one the zoom at 80% gives which scales all of the parts of the theme, this is why I think I should reduce all of the sizes on the Advanced settings as well

I will try to this evening, I will let you know

Quote from Alexander Ebert

The only proper way is too adjust everything that you want to be scaled down, like reducing the font size, paddings, margins, etc. "Zoom" is basically like using a scrap press to make your car a bit smaller. It works, but the result is a constant source of strange artifacts and rounding errors.

Almost forgot about this, I abandoned ship as it was getting way too complicated for me!