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. There are two sets of guidelines: the grey one for 960px width and the blue one for 1200px width. Please refer to the screenshots below.

1. Screenshot with the contrast changed so that you can notice the guidelines better:

yunSi0.png

2. Screenshot in original colors, as you will see them in the builder

Markup_2022-11-08_at_19.38.05.png

If you do not see both guidelines, please zoom out! You can use the keyboard shortcuts CMD+ / CMD- (Mac) or Ctrl+ / Ctrl- (Windows). 

 

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