> For the complete documentation index, see [llms.txt](https://velara-3.gitbook.io/web-export/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://velara-3.gitbook.io/web-export/export-artboard-dialog/scale-to-fit.md). # Scale to fit Scale contents to fit Scaling allows your page to fit to the available space in the browser. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LoqJcE33Onl46K7QQDH%2F-LoqKZRz6TT3YAIWQIhj%2Fimage.png?alt=media\&token=3c272031-488f-434e-8e32-6ffe6c1aca7e) With scaling you can scale the page to fit the width of the browser, the height of the browser or both. > In [Euclidean geometry](https://en.wikipedia.org/wiki/Euclidean_geometry), **uniform scaling** (or [**isotropic**](https://en.wikipedia.org/wiki/Isotropic) **scaling**[\[1\]](https://en.wikipedia.org/wiki/Scaling_\(geometry\)#cite_note-1)) is a [linear transformation](https://en.wikipedia.org/wiki/Linear_transformation) that enlarges (increases) or shrinks (diminishes) objects by a [scale factor](https://en.wikipedia.org/wiki/Scale_factor) that is the same in all directions. The result of uniform scaling is [similar](https://en.wikipedia.org/wiki/Similarity_\(geometry\)) (in the geometric sense) to the original. > > Uniform scaling happens, for example, when enlarging or reducing a [photograph](https://en.wikipedia.org/wiki/Photograph), or when creating a [scale model](https://en.wikipedia.org/wiki/Scale_model) of a building, car, airplane, etc. \ > [Wikipedia](https://en.wikipedia.org/wiki/Scaling_\(geometry\)) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-Lp9upcNlOvMGJBCGpfw%2F-Lp9z_WC6TgcCpyFdVDf%2Fscaling-enabled.gif?alt=media\&token=cea0a6ac-a950-46f6-9bee-42b4ed3ad582) {% embed url="" %} Scaling demonstration video {% endembed %} Scaling can be done when the page loads, when the browser is resized, or scaled on double click and more. {% hint style="info" %} Scaling can make the page unreadable. Use the `--web-minimum-scale` CSS property to on your page if you want to define a minimum scale. 1 is 100%, 2 is 200%, .5 is half size. {% endhint %} `--web-minimum-scale: .8` Use the horizontal and vertical positions to position the artboard. #### Scale Options The scale options provide options **Scale** - The scale value is a number that enlarges (increases) or shrinks (diminishes) objects, in this case the artboard, by a scale factor that is the same in all directions. A scale value of 1 is normal size. A scale value of 2 is twice as large. A scale value of .5 is half the original size. * **Default scale** - the page (the artboard) is not scaled. It is shown at actual size. The view is at 100%. If it is larger than the size of the browser window scroll bars appear. * **Scale to fit** - The page is scaled down to fit the available width or height of the browser. * **Scale to width** - The page is scaled down to fit the available width. If the page is really tall vertical scroll bars appear so you can scroll the page up or down. * **Scale to height** - The page is scaled down to fit the available height. If the page is really wide horizontal scroll bars will appear so you can scroll left or right. * **Scale on resize** - If you resize the browser the page is scaled. With this option turned off the page is scaled once when the page loads. **Reset scale on double click** - With this option enabled you can double click on a scaled page (a page that is not actual size) and it will be shown at actual size. For example, if you have a large page that is scaled down and then double click on the page it will be shown at full size with scroll bars. **Scale on double click** - With this option enabled if the page is at actual size and you double click on it will be scaled. **Show scale slider** - This shows a horizontal slider on the page that you can use to scale the page up or down **Enable scale up** - With this option enabled the page will scale up to fit any available space. So if you have a large screen the page may appear larger than the size it was designed at. **Minimum Scale** - This is the minimum scale amount. Currently you must set this in CSS defining a numeric value for "`--web-minimum-scale`”. **Center horizontally** - The page is centered horizontally when there is space on the left or right of the page. (optional) (related) **Center vertically** - The page is centered vertically when there is space above or below the page. (optional) (related) **To Scale to Fit** To use Scale to Fit open the Export Artboards dialog. In the Scale options group select the options you want to use. Usually this will be **Scale to fit** or **Scale to Width** and then **Scale on resize** and **Enable scale up.** ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LoqJcE33Onl46K7QQDH%2F-LoqLdQDGr970vQ8K0oi%2Fimage.png?alt=media\&token=2b573997-7941-4765-a4f6-757ad8391bc3) You will probably like to have **Center Horizontally** and **Center Vertically** checked as well. #### Troubleshooting If page doesn’t scale at all check a few things. * Check to make sure JavaScript is enabled in your browser * Open web inspector tools and check for any messages in the console (CMD+ALT+I) * Be sure to load the stylesheet before the application script * When loading from a file:// path it may not run unless you place the stylesheet inline. In other words if the stylesheet is a separate file linked in it may not run. To fix the issues (try each of the steps in order): * Turn off external stylesheet (while testing) * Test in a different browser (test in Firefox or Brave) * Load the page from localhost * Load the page from your main server * If you still get errors on your main server you may need to add a content security policy Post any questions to the [forums](http://discuss.velara3.com).