How Does Responsive Design work in Amaze?

How Does Responsive Design work in Amaze?


Amaze can be used to create responsive designs. Responsive designs automatically adjust as the size of the viewport (the space where your Amaze page is displayed - the Live Preview window or on an actual device) changes. 


Amaze does not use CSS grids or flexbox for the layout. Instead, elements are positioned absolutely, and pinning, layout and scale settings dictate how they will position and scale (if at all) on different viewport sizes.  You can manually override all settings by toggling on Advanced Responsive on the Object tab in the right inspector. 

The following principles can be applied to individual layers or groups of elements.
  • The element can be pinned to the top or bottom and the left or right.
  • This position can be expressed as an absolute pixel value, a percentage of the viewport width, or a percentage of the viewport height.
  • The item’s scale can be expressed as an absolute pixel value, a percentage of the viewport width, or a percentage of the viewport height.
  • In addition, items can scale on both dimensions but will not maintain aspect ratio. For images in this scenario, the user can set whether that image covers, fits or is stretched to the item’s container.

How Responsive Works in Practice

The layout of elements on the workspace is the starting point for all calculations. All relative units are based on that design. In other words, if the viewport on the device is exactly the same as that design, it will look exactly the same as the workspace, no matter what responsive settings the user has.

Only if the viewport of the device is different, the design will adjust. For example, on a 375x667 (iPhone 7) mobile design, say there’s a 300x150 image that’s set to scale by width and pinned top/left by vw. It’s 10 pixels from both the top and left. On a 411x731 device (Pixel 2), that image will be (approximately):

  • Width: 80vw = 328px
  • Height: 40vw = 164px
  • Top: 2.6vw = 10.68px
  • Left: 2.6vw = 10.68px

Unpinned Items

When an item is “unpinned”, we use a (CSS) calculation to keep the center point of the object the same relative distance to the (top/left) edge that it is in the original design.

Default Settings

The default settings are as follows: items on the root level are scaled by width and unpinned (see above). Items in folders are scaled by width and pinned top/left by vw. Note, that in Famous folders are translated directly into DOM and become <div> tags. A special case is scrolling screens. In this case, all items are scaled by width and pinned top/left vw.

    • Related Articles

    • Device Driven Design (Mobile, Tablet and Desktop Devices)

      Overview Amaze takes a device-specific approach to design. Rather than create one design that responds to different screen sizes, you have to create separate designs tailored for mobile, tablet and desktop. When a visitor lands on your Amaze page, a ...
    • Are Famous sites limited to mobile devices?

      Question: Are Famous pages mobile-only? Answer: Famous Pro works best for creating single-page mobile websites. If you want your Famous site to work across mobile, desktop, and tablet, you will need to create a separate design for each.  ...
    • How to Create a Scroll Card

      Vertical Scrolling Screens You can turn any Screen into a Scrollable screen by going to the Settings Tab and selecting Allow Scrolling option. Enabling scrolling will add an icon to your project, which will allow you to scroll the entire frame. This ...
    • Can I add Google Analytics to my Amaze Page?

      Add Google Analytics UA ID You can add a Google Analytics Universal Analytics ID to track views of your Amaze pages in Google Analytics You need a Google Analytics Account to use this feature. The Google Analytics integration only works Universal ...
    • Templates

      Templates make it easy to create beautiful, professional-grade designs in minutes. The Templates section is the first thing you see on the Home Screen. It contains Start from a template and View all templates. Here are some more facts to help you ...