Responsiveness, the mobile breakpoint, and the size of the mobile canvas

 

What is the responsiveness limit for the desktop version of a page?

The pages you build with Instapage are responsive up to 1200 pixels in width, meaning that elements you add in that range (600 pixels to the left and 600 pixels to the right, measured from the center of the page) will move/scale when the browser window is smaller or when it is manually resized. The center column spans 960 pixels, but you can measure 1200 pixels by using a box/rectangle shape from the left-side menu of the editor. 

The 1200 pixels responsiveness limit does not mean you cannot add elements outside of that area, it only means that those elements might not be fully visible on all device sizes, on smaller screens for example. 

What is the size of the mobile canvas?

The width is 400 pixels. The mobile canvas represents the surface area in which you can place the elements on the page.

What is the mobile breakpoint?

The landing page is responsive to the visitor's screen size. When it detects that the browser is wider than 768 pixels, then the desktop version of the page is shown. When it detects that the browser width is below 768px, then the mobile version of the page is shown. 

This means that if you manually resize your desktop browser window to have the size of a mobile one, the page will adapt and start showing the mobile design (if it is enabled).

Taking this into consideration, a tablet held in the portrait orientation will show the mobile version of the page, while a tablet held in the landscape orientation will show the desktop version of the page.

In the image below, you can see a visual representation of how much 400px and 768px are in the builder. (The shapes and text are added as a background image on the Instablock - only the background image of the block will be displayed between 400px and 768px)

A screenshot of the mobile builder with a background image that shows a visual representation of how much 400px and 768px are