Web Export
Search…
Web Export
Introduction
Getting Started
Install the Plugin
Create or open a project
Export the Artboard
Export Artboard Dialog
File Name
Subdirectory
Page Title
Web Page Template
Expected HTML Output
Stylesheet Name
Artboard Stylesheet template
Expected Stylesheet output
Script Page options
Images
Export Folder
Server
Alternative Fonts
Scale to fit
Centering the page
Styles Inline
Style via Classes
Markup Only
Outline Elements
Keyboard Navigation
Add Data Name
Add Image Compare
Auto Refresh
Export type
Reset Artboard
Addressing Export Issues
Messages Console
Export types
Keyboard Shortcuts
Responsive Pages
Dynamical page that grows in height
Modifying Individual Elements
Elements and Sub Elements
Styling elements
Element Options
Changed Properties
How to section
Creating Code Blocks
How Exporting Works
Single Page Application API
Element Tokens
Template Tokens
Setting up a server
Putting your site online
Code Block Snippets
Other Features
Learning by Videos
WordPress Integration
Example Packages
Web Developers
Non Web Developers
Debugging
Version
Support
License
Feature and Bug Reports
Related Plugins
Powered By GitBook
Scale to fit
Scale contents to fit
Scaling allows your page to fit to the available space in the browser.
With scaling you can scale the page to fit the width of the browser, the height of the browser or both.
In Euclidean geometry, uniform scaling (or isotropic scaling[1]) is a linear transformation that enlarges (increases) or shrinks (diminishes) objects by a scale factor that is the same in all directions. The result of uniform scaling is similar (in the geometric sense) to the original.
Uniform scaling happens, for example, when enlarging or reducing a photograph, or when creating a scale model of a building, car, airplane, etc. Wikipedia​
Scaling demonstration video
Scaling can be done when the page loads, when the browser is resized, or scaled on double click and more.
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.
--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.
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.
Previous
Alternative Fonts
Next
Centering the page
Last modified 2yr ago
Copy link
Contents