Zoom scale

Hello, I wondered if you could tell me a nice way to reduce the scale or zoom of the entire application in a nice way? If I set the browser view zoom to 80% this gives the desired look I am wanting but I want to know the best way to do this within the code? Many thanks Lewis

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

May I know which template and version are you using ? You can reduce the root font size in px and the layout and components use REM(relative to the root font size) for padding, font size, and margin attributes. Default root font size is 13px so you can try to change it 11px or 12px by overriding the defaults for Metronic v8.1 demo1 in src/sass/layout/_variables.custom.scss

$app-general-root-font-size-desktop: 11px !default;
$app-general-root-font-size-tablet: 11px !default;
$app-general-root-font-size-mobile: 11px !default;

Or for other versions of Metronic or other templates in src/sass/layout/_variables.scss:

// Root font Sizes
$root-font-size: 11px; // Root font size for desktop mode
$root-font-size-lg: 11px; // Root font size for tablet mode
$root-font-size-md: 11px; // Root font size for mobile mode

Then recompile the theme assets with gulp or webpack.

For more info about using Metronic please check the Theme Documentation
and Video Tutorials

Regards.


Regards.

Hi there many thanks for your response, I have tried the method you suggested and it seems to take no effect? I am using the Laravel version 8.0.37.

Are you able to provide some more specific instruction? Many thanks for your help

Hi,

Have u recompiled the assets after changing the source via sass ? If you do so it should have worked as expexted. Can u check your style.css that your laravel app loads. Does it use the changed font-size: 11px for the root html/body elements ?

Regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(